"Example "
Bootstrap 4.1.1 Snippet by divyalahad

<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 ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.1.0/css/flag-icon.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <!------ Above HEAD tag CODE below ----------> <h1 class="text-center">Example 6 - Background Image with hidden text</h1> ++++ <nav class="navbar navbar-inverse navbar-static-top example6"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar6"> <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 text-hide" href="http://disputebills.com">Brand Text </a> </div> <div id="navbar6" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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 class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> <!------ Include the above in your HEAD tag ----------> <h1 class="text-center">Example 3 - Increase entire navbar height</h1> <div class="example3"> <nav class="navbar navbar-inverse navbar-static-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar3"> <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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills"> </a> </div> <div id="navbar3" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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 class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> <!------ Include the above in your HEAD tag ----------> <h1 class="text-center">Example 2 - Increase logo size and add menu to right side</h1> <div class="container example2"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2"> <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="http://disputebills.com"><img src="https://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills"> </a> </div> <div id="navbar2" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="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 class="dropdown-header">Nav header</li> <li><a href="#">Separated link</a></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> </div> <!--/.nav-collapse --> </div> <!--/.container-fluid --> </nav> </div> <div style="padding-left:16px"> <h2>Responsive Login Form in Navbar</h2> <p>Navigation menu with a login form and a submit button inside of it.</p> <p>Resize the browser window to see the responsive effect.</p> </div> ************************************* <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div id="wrapper"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark fixed-top"> <div class="container"> <a href="#menu-toggle" class="navbar-toggler " id="menu-toggle"><i class="myfa fa fa-ellipsis-h"></i></a> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">All</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Images</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Videos</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Maps</a> </li> <li class="nav-item"> <a class="nav-link" href="#">News</a> </li> <li class="nav-item"> <a class="nav-link" href="#">MSN</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Office Online</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Outlook.com</a> </li> </ul> <ul class="navbar-nav ml-auto "> <li class="nav-item avatar-profile"> </li> <li class="nav-item dropdown d-none d-sm-block"> <a class="nav-link " href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-bars"></i> </a> <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog"> <a class="dropdown-item" href="#"><i class="fa fa-cog"></i> Setting</a> <a class="dropdown-item" href="#"><i class="fa fa-history"></i> Search history</a> <a class="dropdown-item" href="#"><i class="fa fa-star"></i> My interest</a> <a class="dropdown-item" href="#"><i class="fa fa-check"></i> My saves</a> <a class="dropdown-item" href="#"><i class="fa fa-gamepad"></i> Fun & Games</a> <a class="dropdown-item" href="#"><i class="fa fa-comment"></i> Feedback</a> <a class="dropdown-item" href="#"><i class="fa fa-lock"></i> SafeSearch</a> </div> </li> </ul> </div> </div> </nav> <!-- Masthead --> <!-- Sidebar --> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <li> <div class="col-lg-2 mb-4 "> <h4 class="card-header myh4">Flowers</h4> <a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/992734/pexels-photo-992734.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a> </div> </li> <li> <div class="col-lg-2 mb-4"> <h4 class="card-header myh4">Business </h4> <a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/179912/pexels-photo-179912.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a> </div> </li> <li> <div class="col-lg-2 mb-4 "> <h4 class="card-header myh4">Culture</h4> <a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1008241/pexels-photo-1008241.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a> </div> </li> <li> <div class="col-lg-2 mb-4 "> <h4 class="card-header myh4">Pets</h4> <a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/1038914/pexels-photo-1038914.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a> </div> </li> <li> <div class="col-lg-2 mb-4 "> <h4 class="card-header myh4">Adventure</h4> <a href="#"> <img class="card-img-top" src="https://images.pexels.com/photos/708392/pexels-photo-708392.jpeg?auto=compress&cs=tinysrgb&h=350"> </a> </div> </li> <li> <div class="col-lg-2 mb-4 "> <h4 class="card-header myh4">Nature</h4> <a href="#"><img class="card-img-top" src="https://images.pexels.com/photos/623080/pexels-photo-623080.jpeg?auto=compress&cs=tinysrgb&h=350" alt=""></a> </div> </li> </ul> </div> //////////////////////////
.navbar { background-color: #f17115; } .navbar .navbar-brand { color: #ecf0f1; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #ecdbff; } .navbar .navbar-text { color: #ecf0f1; } .navbar .navbar-text a { color: #ecdbff; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus { color: #ecdbff; } .navbar .navbar-nav .nav-link { color: #ecf0f1; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #ecdbff; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { color: #ecdbff; background-color: #000f40; } .navbar .navbar-toggle { border-color: #000f40; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #000f40; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ecf0f1; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #ecf0f1; } .navbar .navbar-link { color: #ecf0f1; } .navbar .navbar-link:hover { color: #ecdbff; } @media (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #000f40; } } @media (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #000f40; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #000f40; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #000f40; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #000f40; } .navbar { background-color: #001d7b; } .navbar .navbar-brand { color: #ecf0f1; } .navbar .navbar-brand:hover, .navbar .navbar-brand:focus { color: #ecdbff; } .navbar .navbar-text { color: #ecf0f1; } .navbar .navbar-text a { color: #ecdbff; } .navbar .navbar-text a:hover, .navbar .navbar-text a:focus { color: #ecdbff; } .navbar .navbar-nav .nav-link { color: #ecf0f1; border-radius: .25rem; margin: 0 0.25em; } .navbar .navbar-nav .nav-link:not(.disabled):hover, .navbar .navbar-nav .nav-link:not(.disabled):focus { color: #ecdbff; } .navbar .navbar-nav .dropdown-menu { background-color: #001d7b; border-color: #f17115; } .navbar .navbar-nav .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar .navbar-nav .dropdown-menu .dropdown-item:hover, .navbar .navbar-nav .dropdown-menu .dropdown-item:focus, .navbar .navbar-nav .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; } .navbar .navbar-nav .dropdown-menu .dropdown-divider { border-top-color: #f17115; } .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link:hover, .navbar .navbar-nav .nav-item.active .nav-link:focus, .navbar .navbar-nav .nav-item.show .nav-link, .navbar .navbar-nav .nav-item.show .nav-link:hover, .navbar .navbar-nav .nav-item.show .nav-link:focus { color: #ecdbff; background-color: #f17115; } .navbar .navbar-toggle { border-color: #f17115; } .navbar .navbar-toggle:hover, .navbar .navbar-toggle:focus { background-color: #f17115; } .navbar .navbar-toggle .navbar-toggler-icon { color: #ecf0f1; } .navbar .navbar-collapse, .navbar .navbar-form { border-color: #ecf0f1; } .navbar .navbar-link { color: #ecf0f1; } .navbar .navbar-link:hover { color: #ecdbff; } @media (max-width: 575px) { .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; } } @media (max-width: 767px) { .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; } } @media (max-width: 991px) { .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; } } @media (max-width: 1199px) { .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; } } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item { color: #ecf0f1; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover, .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus { color: #ecdbff; } .navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active { color: #ecdbff; background-color: #f17115; body{overflow-x:hidden; position:relative; background-color:#343a40; background:url('https://www.bing.com/az/hprichbg/rb/ChottelDjerid_EN-IN9315193811_1920x1080.jpg') no-repeat center center fixed; -webkit-background-size:cover; -moz-background-size:cover;-o-background-size:cover; background-size:cover;; padding-top:10rem; } header.masthead.text-white.text-center { padding-top: 3rem; } section.features-icons{ padding-top: 15rem; } .carousel-control-next, .carousel-control-prev { position: absolute; top: 3px; bottom: 28px; width:3rem !important; background:#000; } .myoverlay{ position: fixed; background: rgba(42, 35, 29, 0.7803921568627451); height:100%; width:100%; z-index: 1273; } .mylogo{ float:left; background-image: url('https://www.bing.com/s/a/hpc23.png'); background-position: 0 0; margin: -7px 21px 0 0; width: 132px; height: 52px; } /*--carousel--*/ .card-section{ background: transparent; position: absolute; left: 0; right: 0; top: 74%; } .mycard-body { -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1.25rem; } .card-body{ padding:0px !important; } .card-header{ background: rgba(42, 35, 29, 0.7803921568627451) !important; border-radius: 0px !important; padding: 8px !important; text-indent:8px; } .card-gal-item { overflow: hidden; padding: 4px; } .card-gal-item .box { height: 117px; overflow: hidden; } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: transparent; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: none; } .card-img-top { width: 100%; border-top-left-radius:0; border-top-right-radius: 0; } .myform{ border-radius: 0px !important; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08); } .mybg-dark{ background: rgba(42, 35, 29, 0.7803921568627451) !important; } .mybtn{ background: #20c997 !important; border-color: #20c997 !important; } /*--button css--*/ .mybtn-secondary{ color: #000; background: transparent !important; border-color: #000; font-size:14px; } .mybtn-secondary:hover{ color:#fff; border-color: #6c757d; background-color: #6c757d !important; font-size:14px; } button.btn.btn-default { position: absolute; top: 0px; height: 48px; width: 50px; border-radius: 0; right: 5px; background: transparent; outline: none; } .fa-2x{ font-size:22px; color: #238fb6; } h4.card-title.myh4 a { color: #fff; text-decoration: none; } .myh4{ font-size:15px; margin-bottom:0px !important; font-weight: normal; color:#fff; } .myp-text{ font-size: 14px; } .mylead{ font-size: 19px; } .h-145{ height: 145px !important; width: 100%; } .call-to-action{ position:relative; background-color:#DDDDDD; padding-top:35px; padding-bottom:5px; } /*--footer--*/ .myfooter{ padding-top: 5px; padding-bottom: 3px; } ul.list-inline.small.mb-2 a { color: #6c757d!important; } p.color-icon a i{ color: #6c757d !important; } .social-icons{ color: #6c757d!important; font-size:17px; } .heading-title{ font-size: 22px; font-weight: normal; text-transform:uppercase; line-height: 2; margin-top: 10px; text-indent: 4px; } /*my gallery*/ .gallery{ padding-top: 1rem; padding-bottom: 4rem; } .gal-item { overflow: hidden; padding: 1px; } .gal-item .box { height: 250px; overflow: hidden; } .box img { height: 100%; width: 100%; object-fit: cover; -o-object-fit: cover; } /*--Gallery Zoom--*/ .item { position: relative; } .item img { max-width: 100%; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .item:hover img { -moz-transform: scale(1.2); -webkit-transform: scale(1.2); transform: scale(1.2); } .item:hover .post-title b { background-color: rgba(51, 51, 51, 0.58); position: absolute; top: 205px; right: 0; color: #FFF; padding: 10px 15px; } .dropdown-menu { min-width: 16rem; padding: 1.5rem 0px; border: none; border-radius: 0; } .dropdown-item { display: block; width: 100%; padding: 10px 1.5rem; clear: both; font-weight: 400; color: #212529; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; } .avatar-profile img { width: 35px; height: 34px; border-radius: 100%; overflow: hidden; margin-right: 11px; margin-left: 11px; } /*--Sidebar--*/ #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { z-index: 1000; position: fixed; left: 250px; width: 0; top: 0; height: 100%; margin-left: -250px; overflow-y: auto; background: #000; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { width: 100%; position: absolute; padding: 15px; } #wrapper.toggled #page-content-wrapper { position: absolute; margin-right: -250px; } /* Sidebar Styles */ .myfa{ display: inline-block; font-size: 25px; vertical-align: middle; } .sidebar-nav { position: absolute; top: 80px; width: 250px; margin: 0; padding: 0; list-style: none; } .sidebar-nav li { text-indent: 20px; line-height: 40px; } .sidebar-nav li a { text-decoration: none; color: #999999; } .sidebar-nav li a:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, 0.2); } .sidebar-nav li a:active, .sidebar-nav li a:focus { text-decoration: none; } .sidebar-nav>.sidebar-brand { height: 65px; font-size: 18px; line-height: 60px; } .sidebar-nav>.sidebar-brand a { color: #999999; } .sidebar-nav>.sidebar-brand a:hover { color: #fff; background: none; } @media(min-width:768px) { #wrapper { padding-left: 0; } #wrapper.toggled { padding-left: 250px; } #sidebar-wrapper { width: 0; } #wrapper.toggled #sidebar-wrapper { width: 250px; } #page-content-wrapper { padding: 20px; position: relative; } #wrapper.toggled #page-content-wrapper { position: relative; margin-right: 0; } } #menu-toggle{ display:none; } /*----Responsive---*/ @media (max-width: 480px){ header.masthead { padding-top: 12rem; padding-bottom: 12rem; } #menu-toggle{ display:block; } .myhead{ font-size:20px; } .mylead{ font-size:16px; } } @media (max-width: 600px) and (min-width: 481px){ #menu-toggle{ display:block; } } }
$(window).on("scroll", function(){ if( $(this).scrollTop() > 10 ){ $("nav.navbar").addClass("mybg-dark"); $(".navbar-dark .navbar-nav .nav-link").css({"color" : "#fff"}); }else{ $("nav.navbar").removeClass("mybg-dark"); $(".navbar-dark .navbar-nav .nav-link").css({"color" : "rgba(255,255,255,.5)"}); } }); $(document).ready(function(){ $(".fancybox").fancybox({ openEffect: "none", closeEffect: "none" }); }); $(function(){ $(".myform").on("click", function(e){ $("body").toggleClass("myoverlay"); }); $(document).on("click",function(e){ if( $(e.target).is("body, .myform") == false ){ $("body").removeClass("myoverlay"); } }); }); $("#menu-toggle").click(function(e) { e.preventDefault(); $("#wrapper").toggleClass("toggled"); });

Related: See More


Questions / Comments: