<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section id="banner" class="banner"> <div class="bg-color"> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="col-md-12"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="img/logo.png" class="img-responsive" style="width: 140px; margin-top: -16px;"></a> </div> <div class="collapse navbar-collapse navbar-right" id="myNavbar"> <ul class="nav navbar-nav"> <li class="active"><a href="#banner">Home</a></li> <li class=""><a href="#service">Services</a></li> <li class=""><a href="#about">About</a></li> <li class=""><a href="#testimonial">Testimonial</a></li> <li class=""><a href="#contact">Contact</a></li> </ul> </div> </div> </div> </nav> <div class="container"> <div class="row"> <div class="banner-info"> <div class="banner-logo text-center"> <img src="https://bootstrapmade.com/demo/Medilab/img/logo.png" class="img-responsive"> </div> <div class="banner-text text-center"> <h1 class="white">Healthcare at your desk!!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod <br>tempor incididunt ut labore et dolore magna aliqua.</p> <a href="#contact" class="btn btn-appoint">Make an Appointment.</a> </div> <div class="overlay-detail text-center"> <a href="#service"><i class="fa fa-angle-down"></i></a> </div> </div> </div> </div> </div> </section>

#banner { background: url(https://bootstrapmade.com/demo/themes/Medilab/img/bg-banner.jpg) no-repeat fixed; background-size: cover; min-height: 650px; position: relative; } .bg-color { background-color: RGBA(13, 70, 83, 0.78); min-height: 650px; } .navbar { border-radius: 0px; } .navbar-default { background-color: transparent; border: 0px; } .navbar-default { padding: 20px 0; transition: all 0.3s; } .banner-info { padding-top: 190px; }