"Bootstrap Full width Slider, header, header width Slider, "
Bootstrap 3.0.0 Snippet by aditya43

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div id="wrapper"> <header class="header navbar-fixed-top"> <div class="container"> <ul class="nav navbar-nav navbar-right topnav "> <li class="followUs"> <a href="#"><i class="fa fa-facebook fa-fw"></i></a> <a href="#"><i class="fa fa-twitter fa-fw"></i></a> <a href="#"><i class="fa fa-google-plus fa-fw"></i></a> <a href="#"><i class="fa fa-youtube fa-fw"></i></a> </li> <li class="active"><a href="callto:9999999999"><i class="fa fa-phone fa-fw"></i> +91 9999999999</a></li> <li class="active"><a href="mailto:info@Aditya.com"><i class="fa fa-envelope fa-fw"></i> info@bloom.com</a></li> </ul> </div><!-- end of container --> <nav class="navbar menubar navbar-fixed-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand logo"><h4>My Logo Here</h4></a> </div> <!-- Collection of nav links, forms, and other content for toggling --> <ul class="nav navbar-nav navbar-right rightmenu"> <li><a href="#"><span><i class="fa fa-shopping-cart"></i></span><span class="cart-count" id="cart_count">0</span></a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" type="button" data-toggle="dropdown"><span><i class="fa fa-user"></i></span></a> <ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li><a href="#">Register</a></li> </ul> </li> <li><a href="#" onclick="openNav2()"><span><i class="fa fa-search"></i></span></a></li> </ul> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Story</a></li> <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Shop </a> <ul class="dropdown-menu mega-dropdown-menu"> <li class="col-sm-3 col-xs-6"> <ul> <li><a href="#">Top</a></li> <li><a href="#">Dresses</a></li> <li><a href="#">Jumpsuits</a></li> <li><a href="#">Rompers</a></li> </ul> </li> <li class="col-sm-3 col-xs-6"> <ul> <li><a href="#">Sweaters</a></li> <li><a href="#">Jackets</a></li> <li><a href="#">Pants</a></li> <li><a href="#">Skirts</a></li> </ul> </li> <li class="col-sm-3 col-xs-6"> <ul> <li><a href="#">Boxers</a></li> <li><a href="#">Pajamas</a></li> <li><a href="#">Tees</a></li> <li><a href="#">Sweatshirts</a></li> </ul> </li> <li class="col-sm-3 col-xs-6"> <ul> <li><a href="#">Camisole</a></li> <li><a href="#">Bra Top</a></li> <li><a href="#">Leggings</a></li> <li><a href="#">Tubes</a></li> </ul> </li> <li class="col-sm-3 col-xs-6"> <ul> <li><a href="#">Jewelry</a></li> <li><a href="#">Fashion Tape</a></li> <li><a href="#">Scarves</a></li> <li><a href="#">Stationery</a></li> </ul> </li> </ul> </li> <li><a href="#">Sale</a></li> </ul> </div> </div><!-- end of container --> </nav> <div id="rightside" class="sidenav2"> <div class="sidemenu"> <div class="hdwel light"> SEARCH <a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a> </div><!-- end of hdwel --> <div class="input-group inputserch"> <input type="text" class="form-control" placeholder="Search" > <span class="input-group-addon"> <button type="submit" class="btn btn-default"> <span class="glyphicon glyphicon-search"></span> </button> </span> </div> <br/> <small>Find your product with fast search. Enter some keyword such as dress, shirts, shoes etc. Or can search by product sku.</small> <div class="clear"></div> <br/> <h4>FEATURED PRODUCTS</h4> <ul class="list-unstyled listitem"> <li><a href="listing.html"> <img src="http://htmlvalley.in/BloomHtml/images/pics3.jpg" alt="" /> <div class="ttbox"> <div class="prodbtm"><p>Analese Striped Shift Dress</p> <span><i class="fa fa-inr"></i> 1,300</span> </div> </div> </a> </li> <li><a href="listing.html"> <img src="http://htmlvalley.in/BloomHtml/images/pics5.jpg" alt="" /> <div class="ttbox"> <div class="prodbtm"><p>Analese Striped Shift Dress</p> <span><i class="fa fa-inr"></i> 1,300</span> </div> </div></a> </li> </ul> </div><!-- end of sidemenu --> </div><!-- end of sidenav2 --> </header><!-- end of header --> <section class="sliderpanel"> <header id="myCarousel" class="carousel slide myslider" data-interval="3000" data-ride="carousel"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider.jpg');"></div> <div class="item" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider2.jpg');"></div> <div class="item" style="background-image: url('http://htmlvalley.in/BloomHtml/images/slider3.jpg');"></div> </div> <!-- Carousel nav --> <a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a> <a class="carousel-control right" data-slide="next" href="#myCarousel">›</a> </header> </section><!-- end of sliderpanel --> </div><!-- end of wrapper -->
html, body{ height: 100%; } html { min-height: 100%; } body { height: 100%; } #wrapper{ width: 100%; display: block; margin: 0px; position: relative; } .header{ display: block; background-color: #f1f1f1; } .topnav{ display: block; } .topnav li{ margin: 0px 6px; } .header .topnav li a{ color: #000; font-size: 13px; padding: 3px 3px; font-weight: 200; } .followUs a{ float: left; } #wrapper .logo{ max-width: 160px; padding: 8px 10px; height: auto; border-radius: 5px; } .logo img{ width: 100%; } #wrapper .menubar{ display: block; margin: 0px; min-height: inherit; z-index: 9; -webkit-transition: all 0.5s ease 0s; -moz-transition: all 0.5s ease 0s; -o-transition: all 0.5s ease 0s; transition: all 0.5s ease 0s; background-color: transparent; } #wrapper .menubar.navbar-fixed-top { top: 24px; } #wrapper .menubar:hover{ background-color: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.05); } #wrapper .meffect{ background-color: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.05); } .header .menubar li a{ color: #000; font-size: 13px; line-height: 37px; padding: 10px 15px; } .header .menubar li a:hover{ background-color: transparent; color: #850072; } .header .menubar li a:focus{ background-color: transparent; } .header .menubar .mega-dropdown:hover .dropdown-toggle{ background-color: #850072; color: #fff; } #wrapper .rightmenu{ margin-left: 15px; } #wrapper .rightmenu li{ margin: 0px 10px; } #wrapper .rightmenu li a{ display: table; position: relative; padding: 9px 0px; } #wrapper .rightmenu li a span{ width: 40px; height: 40px; padding: 0px; /* line-height: 40px;*/ display: table-cell; vertical-align: middle; text-align: center; color: #000; border: 1px solid #e5e5e5; border-radius: 50%; } #wrapper .rightmenu a span.cart-count { font-size: 10px; color: #fff; background: #862972; width: 20px; height: 20px; line-height: 20px; text-align: center; border: 0px; position: absolute; top: 17px; right: -5px; } #wrapper .rightmenu .dropdown-menu{ min-width: auto; margin: 0px; padding: 0px; } #wrapper .rightmenu .dropdown li { margin: 0px; } #wrapper .rightmenu .dropdown li a{ padding: 9px 10px; line-height: normal; width: 100%; border-bottom: solid 1px #eee; } #wrapper .rightmenu .dropdown li a:hover{ background-color: #862972; color: #fff; } .menubar li.dropdown:hover > .dropdown-menu { display: block; } #wrapper .mega-dropdown { position: static !important; } #wrapper .mega-dropdown-menu { padding: 10px 0px; background-color: #f7f5fb; width: 100%; text-align: center; border-bottom: none; box-shadow: 0px 8px 10px -6px #ababab; -webkit-box-shadow: 0px 8px 15px -10px #ababab; } .mega-dropdown-menu > li.col-sm-3{ width: 20%; } .mega-dropdown-menu > li > ul { padding: 0; margin: 0; } .mega-dropdown-menu > li > ul > li { list-style: none; border-bottom: dashed 1px #ebebeb; } #wrapper .mega-dropdown-menu > li > ul > li > a { color: #222; font-size: 12px; padding: 0px 0px; line-height: 34px; letter-spacing: 0.6px; } #wrapper .mega-dropdown-menu > li ul > li > a:hover, #wrapper .mega-dropdown-menu > li ul > li > a:focus { text-decoration: none; color: #850072; } .mega-dropdown-menu .dropdown-header { font-size: 15px; color: #000; padding: 0px; line-height: 30px; } .carousel-control { width: 30px; height: 30px; top: -35px; } .left.carousel-control { right: 30px; left: inherit; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right { font-size: 12px; background-color: #fff; line-height: 30px; text-shadow: none; color: #333; border: 1px solid #ddd; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 999; top: 0; right: 0; background-color: #f6f6f6; overflow-x: hidden; transition: 0.5s; padding-top: 40px; -webkit-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); -moz-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); } .sidenav a { padding: 8px 8px 0px 0px; text-decoration: none; font-size: 20px; color: #333; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #000; } .sidenav .closebtn { position: absolute; top: -7px; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .sidemenu{ padding: 10px 17%; display: block; position: relative; overflow-x: auto; } .sidemenu .hdwel{ font-size: 24px; margin-bottom: 30px; font-weight: 200; } .sidenav .navbar-nav{ width: 100%; border-bottom: dashed 1px #b159a4; padding-bottom: 15px; margin-bottom: 15px; } .sidenav .navbar-nav li{ width: 100%; } .sidenav .navbar-nav li a{ width: 100%; display: block; font-size: 14px; padding: 7px 15px; text-transform: uppercase; } .sidenav .navbar-nav li a:hover{ color: #000; } .sidenav .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } #wrapper .nav2 li a{ text-transform: uppercase; font-size: 14px; color: #111; } #wrapper .nav2 li .fa{ color: #b159a4; } .follnav li .fa{ color: #b159a4; font-size: 24px; transition: all 0.5s; } .follnav li .fa:hover{ -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); } .sidenav2 { height: 100%; width: 0; position: fixed; z-index: 999; top: 0; right: 0; background-color: #f6f6f6; overflow-x: hidden; transition: 0.5s; padding-top: 40px; -webkit-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); -moz-box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); box-shadow: 5px 0px 15px 5px rgba(131,201,194,0.2); } .sidenav2 a { padding: 1px 8px 0px 0px; text-decoration: none; font-size: 25px; color: #333; display: block; transition: 0.3s } .sidenav2 a:hover, .offcanvas a:focus{ color: #000; } .sidenav2 .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav2 {padding-top: 15px;} .sidenav2 a {font-size: 18px;} } .inputserch{ width: 100%; margin: 0px; display: block; position: relative; } .inputserch .form-control{ border:none; height: 45px; padding-right: 45px; border-radius: 0px; background-color: transparent; box-shadow: none; border-bottom: solid 2px #addedc; } .inputserch .input-group-addon{ margin: 0px; padding: 0px; border:none; background-color: transparent; } .inputserch .input-group-addon .btn{ width: 55px; height: 45px; border: none; background-color: transparent; position: absolute; right: 0; z-index: 99; top: 0; } .listitem{ width: 100%; margin: 20px 0px 0px; display: block; } .listitem li{ width: 100%; display: block; float: left; margin-bottom: 15px; } .listitem img{ width: 55px; height: auto; margin: 0px 10px 10px 0px; float: left; } #wrapper .listitem .ttbox p{ font-size: 13.5px; color: #000; margin: 0px 0px 3px; } #wrapper .listitem .ttbox span{ color: #000; font-size: 13px; } .sliderpanel{ width: 100%; height: 100%; display: block; } .myslider{ display: block; height: 100%; } .myslider .item { height: 100vh; min-height: 300px; background: no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: top; } .myslider .carousel-control { position: absolute; top: 40%; width: 40px; height: 40px; margin-top: -20px; font-size: 30px; font-weight: 100; line-height: 30px; color: #ffffff; text-align: center; background: #222222; border: 3px solid #ffffff; -webkit-border-radius: 23px; -moz-border-radius: 23px; border-radius: 23px; opacity: 0.5; filter: alpha(opacity=50); } .myslider .carousel-control.left { left: 10px } .myslider .carousel-control.right { right: 10px }
/*=================================== scrollTop menu effects ===================================*/ $(window).scroll(function () { if ($(window).scrollTop() > 100) { $(".menubar").addClass('meffect'); } else { $(".menubar").removeClass('meffect'); } }); function openNav2() { document.getElementById("rightside").style.width = "450px"; document.body.style.backgroundColor = "rgba(168,232,226, 0.7)"; } function closeNav2() { document.getElementById("rightside").style.width = "0"; document.body.style.backgroundColor = "white"; } /*=================================== megadropdown menu ===================================*/ $(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this).removeClass('open'); }); });

Questions / Comments:

Related: See More