<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-fixed-top navcarbox" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact Us</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-collapse --> </nav> <div class="container-fluid"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://images.pexels.com/photos/238211/pexels-photo-238211.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://images.pexels.com/photos/193791/pexels-photo-193791.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div><!-- /header-text --> </div> <div class="item"> <img src="https://sensaq.s3.amazonaws.com/img/Datalogger_with-sensors.png"> <!-- Static Header --> <div class="header-text text-center hidden-xs"> <div class="main_title "> <h2>Paris <span>Top</span> Tours</h2> <p>Quisque at tortor a libero posuere laoreet vitae sed arcu. Curabitur consequat.</p> </div> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div>

.navcarbox { padding-left:5px; display: block; line-height: 1.42857143; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fff; text-decoration: none; background-color: #f7941d; } .navbar-brand img { float: left; transition: all .5s ease-out; margin: 0; } /* Slider CSS */ /* Carousel Styles */ /* Carousel Styles */ .carousel-control {color: #e2e2e2;} .carousel-indicators .active {background-color: #ff5900;} .carousel-inner img {width: 100%;max-height: 420px;} .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; } .carousel-control.left span {margin-left: 50px;} .carousel-control.right span {margin-right: 50px;} .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: none; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 35%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; font-size:18px; letter-spacing:1px; } .header-text h2 {font-size: 60px;color:#fff; font-weight:600;} .header-text h2 span {padding: 10px; color:orange;} .header-text h3 span {padding: 15px;} .btn-min-block {min-width: 170px;line-height: 26px;} .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #f7941d; border-color: #fff; } .navbar { margin-bottom:0px; }