Topic: Fix sidenav on large screens not working
dashingswags pro answered 7 years ago
had same issue.... did a work around like this
style.css
@media only screen and (min-width: 1025px){ //wanted it to show for screens above 1024
.side-nav.fixed {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
}
@media (min-width: 1025px) {
.fixed-sn .double-nav,
.fixed-sn footer {
padding-left: 240px;
}
}
@media (min-width: 1025px) {
.double-nav .button-collapse {
display: none;
}
}
@media (max-width: 1025px) {
.double-nav .button-collapse {
display: block ;
position: relative;
font-size: 1.4rem;
margin-right: 10px ;
margin-left: 10px ;
}
}
then for the javascript
$(window).bind('load resize', function(){
if (window.innerWidth <= 1024) {
$(".button-collapse").sideNav();
}
});
hope this helps as aginst editing the main file
Marta Szymanska staff pro premium answered 8 years ago
tkueny pro answered 8 years ago
Marta Szymanska staff pro premium answered 8 years ago
tkueny pro answered 8 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="~/css/font-awesome.css" />
<link rel="stylesheet" href="~/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/mdb.css" />
</head>
<body class="fixed-sn white-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" /></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a><i class="fa fa-facebook"> </i></a></li>
<li><a><i class="fa fa-pinterest"> </i></a></li>
<li><a><i class="fa fa-google-plus"> </i></a></li>
<li><a><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li>
<a><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#">Submit listing</a>
</li>
<li>
<a href="#">Registration form</a>
</li>
</ul>
</div>
</li>
<li>
<a><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#">For bloggers</a>
</li>
<li>
<a href="#">For authors</a>
</li>
</ul>
</div>
</li>
<li>
<a><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#">Introduction</a>
</li>
<li>
<a href="#">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li>
<a><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li>
<a href="#">FAQ</a>
</li>
<li>
<a href="#">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-left">
<a href="#"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Breadcrumb or page title</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
</li>
<li class="nav-item dropdown">
<a href="#">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a href="#">Action</a>
<a href="#">Another action</a>
<a href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
<br>
<h5>1. Fixed side menu, hidden on small devices</h5>
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
<p><strong>Note: </strong>To make your Navbar fixed on large screens and non-fixed on mobile, add <code>.mobile-nofixed</code> class to your Navbar</p>
<div style="height: 2000px">
</div>
</div>
</main>
<!--/Main layout-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid text-center">
<div class="row">
<!--First column-->
<div class="col-md-12">
<h5 class="title">Footer Content</h5>
<p>Here you can use rows and columns here to organize your footer content.</p>
</div>
<!--/.First column-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="https://www.google.net"> Test</a>
</div>
</div>
<!--/.Copyright-->
</footer>
<script src="~/js/jquery-3.1.1.js"></script>
<script src="~/js/tether.js"></script>
<script src="~/js/bootstrap.js"></script>
<script src="~/js/mdb.js"></script>
</body>
</html>
Marta Szymanska staff pro premium answered 8 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="fixed-sn white-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
Breadcrumb or page title
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
<br>
<h5>1. Fixed side menu, hidden on small devices</h5>
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
<strong>Note: </strong>To make your Navbar fixed on large screens and non-fixed on mobile, add <code>.mobile-nofixed</code> class to your Navbar
<div style="height: 2000px"></div>
</div>
</main>
<!--/Main layout-->
<footer class="page-footer center-on-small-only">
<!--Footer Links-->
<div class="container-fluid text-center">
<div class="row">
<!--First column-->
<div class="col-md-12">
<h5 class="title">Footer Content</h5>
Here you can use rows and columns here to organize your footer content.
</div>
<!--/.First column-->
</div>
</div>
<!--/.Footer Links-->
<!--Copyright-->
<div class="footer-copyright">
<div class="container-fluid">
© 2017 Copyright: <a href="https://www.google.net"> Test</a>
</div>
</div>
<!--/.Copyright-->
</footer>
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
// SideNav init
$(".button-collapse").sideNav();
// Custom scrollbar init
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
</body>
</html>
Mohammad Amir commented 5 years ago
bvnvnbvn cbcvbc fdghfdg
Marta Szymanska staff pro premium commented 5 years ago
Do you need any help?
tkueny pro answered 8 years ago
tkueny pro answered 8 years ago
Kamil Paciepnik answered 8 years ago
tkueny pro answered 8 years ago
p.wood@outlook.com.au pro answered 8 years ago
tkueny pro answered 8 years ago
Kamil Paciepnik answered 8 years ago
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
</head>
<body class="fixed-sn mdb-skin">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav fixed sn-bg-1 custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="sidenav-bg mask-strong"></div>
</ul>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-dark scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="float-xs-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p>Breadcrumb or page title</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main layout-->
<main>
<div class="container-fluid">
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit:</h2>
<br>
<h5>Lorem ipsum dolor sit amet, consectetur</h5>
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dicta nam inventore.</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum dicta nam inventore, in est ipsum provident ratione sint sed unde voluptate illo beatae recusandae dolores, dolorem. Nam voluptate, error! Cupiditate!</p>
<div style="height: 2000px"></div>
</div>
</main>
<!--/Main layout-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script>
$(".button-collapse").sideNav();
</script>
</body>
</html>
Regards p.wood@outlook.com.au pro answered 8 years ago
tkueny pro answered 8 years ago
Marta Szymanska staff pro premium answered 8 years ago
.side-nav.fixed
and you can overwrite settings which are there by your custom code, and then you will change breakpoint for smaller one.
Best,
Marta cdenby pro answered 8 years ago
Merlz pro answered 8 years ago
Merlz pro answered 8 years ago
cdenby pro answered 8 years ago
/*Changing the breakpoint for the Side Nav to match LG instead of 1440*/
.side-nav.fixed {
left: 0;
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
position: fixed; }
.side-nav.fixed.right-aligned {
right: 0;
left: auto; }
/*@media only screen and (max-width: 1440px) { -- Changed by CDenby to below */
@media only screen and (max-width: 992px) { /*This matches Large Screens and Extra Large Screens*/
.XXside-nav.fixed {
-webkit-transform: translateX(-105%);
-ms-transform: translateX(-105%);
transform: translateX(-105%); }
.XXside-nav.fixed.right-aligned {
-webkit-transform: translateX(105%);
-ms-transform: translateX(105%);
transform: translateX(105%); }
}
@media only screen and (min-width: 992px) {
.XXdouble-nav .XXbutton-collapse {
display: none; } }
@media (min-width: 992px) {
.XXnavbar .XXbutton-collapse {
display: none; } }
@media (max-width: 992px) {
.XXnavbar .XXbutton-collapse {
display: block;
position: relative;
font-size: 1.4rem;
margin-top: 2px;
margin-right: 10px;
margin-left: 10px; } }
@media (max-width: 992px) {
.XXfixed-sn .XXdouble-nav,
.XXfixed-sn XXmain,
.XXfixed-sn XXfooter {
padding-left: 0; } }
@media (min-width: 993px) {
.XXfixed-sn .XXdouble-nav,
.XXfixed-sn XXmain,
.XXfixed-sn XXfooter {
padding-left: 240px; } }
jkilbride answered 8 years ago
sass/mdb/free/data/_variables.scss
on line 33 there is:
$sidenav-breakpoint: 1440px !default;
Change that to the value you want and then recompile the SASS to CSS. If you don't know how to use SASS:
http://sass-lang.com/guide
It's not hard and it typically makes bigger changes like this much simpler. Merlz pro answered 8 years ago
jkilbride answered 8 years ago
$sidenav-breakpoint
variable is only used in one place, 7 lines below where it is declared in _variables.scss
:
$hide-sidenav: "only screen and (max-width : #{$sidenav-breakpoint})" !default;
In turn, $hide-sidenav
is only used once on line 402 in /sass/mdb/pro/_side-nav.scss
:
// Fixed sideNav hide on smaller
@media #{$hide-sidenav} {
.side-nav.fixed {
transform: translateX(-105%);
&.right-aligned {
transform: translateX(105%);
}
}
}
Also, searching for 1440px
only comes up with a few hits, mostly in sass/mdb/pro/_navbars-pro.scss
. So, if changing that variable doesn't fix it, unfortunately I don't know what to tell you. Since you have sass setup now, maybe one of the MDB developers can tell you what else needs to be changed. It should be much easier, and less error prone, working with the sass vs. css. Marta Szymanska staff pro premium answered 8 years ago
cdenby pro answered 8 years ago
Marta Szymanska staff pro premium answered 8 years ago
Pelias2525 pro commented 7 years ago
Any updates on a simple way to change the sidenav breakpoint? I'd like it to collapse at SM instead of MD.Pawani & Apoorva Show answered 4 years ago
Double Navigation with a hidden SideNav & fixed Navbar not showing on full screen
<ul class="custom-scrollbar list-unstyled" style="max-height:100vh;">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light waves-effect waves-light">
<a href="#"><img src="image/logo.png" class="img-fluid flex-center"></a>
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a href="#" class="icons-sm fb-ic"><i class="fab fa-facebook-f"> </i></a></li>
<li><a href="#" class="icons-sm pin-ic"><i class="fab fa-pinterest"> </i></a></li>
<li><a href="#" class="icons-sm gplus-ic"><i class="fab fa-google-plus-g"> </i></a></li>
<li><a href="#" class="icons-sm tw-ic"><i class="fab fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group md-form mt-0 pt-1 waves-light waves-effect waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-chevron-right"></i> Submit blog<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a>
</li>
<li><a href="#" class="waves-effect">Registration form</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-hand-pointer"></i> Instruction<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a>
</li>
<li><a href="#" class="waves-effect">For authors</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fas fa-eye"></i> About<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a>
</li>
<li><a href="#" class="waves-effect">Monthly meetings</a>
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="far fa-envelope"></i> Contact me<i class="fas fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
<li><a href="#" class="waves-effect">FAQ</a>
</li>
<li><a href="#" class="waves-effect">Write a message</a>
</li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg mask-strong"></div>
</div>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar peach-gradient double-nav">
<!-- SideNav slide-out button -->
<div class="float-left">
<a href="#" data-activates="slide-out" class="button-collapse"><i class="fas fa-bars"></i></a>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto">
<p><a href="#"><img src="image/logo.png" height="40px"></a></p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fas fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="far fa-comments"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-effect waves-light"><i class="fas fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
</li>
</ul>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
Marcin Luczak staff commented 4 years ago
Hi, I can see that the code you provided lacks some HTML elements which causes it to corrupt. Please provide your code showing your problem using snippets: https://mdbootstrap.com/snippets/. Regards, Marcin
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No