How do I get a fixed sidebar to fit underneath my navbar?

Marta Wierzbicka free answered 6 years ago

Hi,

check this layout: https://mdbootstrap.com/docs/jquery/navigation/compositions/#double-nav-fixed-sidenav-under-fixed-navbar.

Best, Marta

novvia free commented 6 years ago

Does this exist for the Angular version?

Bartłomiej Malanowski staff commented 6 years ago

Yes, you can find it here: https://mdbootstrap.com/docs/angular/navigation/compositions/#hidden-sidenav-under-fixed-navbar

michaelferns free commented 5 years ago

Was a React based solution ever published anywhere?

Grzegorz Bujański free commented 5 years ago

Did you check this: https://mdbootstrap.com/docs/react/navigation/compositions/#double-nav-hidden-sidenav-fixed-navbar ?

michaelferns free commented 5 years ago

I've seen that, but it isn't the look I'm going for. It seems that a solution for a fixed sidebar under a fixed navbar was produced for every variant other than React.

Grzegorz Bujański free commented 5 years ago

I can only give you a basic information about react. If you need more information you should open new topic and specify in the post settings that the question concerns react.

lham priority commented 3 years ago

I'm trying to set up this double navigation with Angular & MDB 5. However, this composition documentation that exists in version 4 does not exist in 5.

Is it possible to do this with https://mdbootstrap.com/docs/b5/angular/navigation/sidenav/ and https://mdbootstrap.com/docs/b5/angular/navigation/navbar/ ?

Arkadiusz Idzikowski staff commented 3 years ago

It is possible to combine the two components you mentioned to achieve a similar effect like in MDB 4. If you encounter any further problems please open a new thread in the Angular category and provide more information about the composition you need to create.

Add comment

anuragd7 free answered 6 years ago

0 0 Best answer

Hi Marta Is this feature released? Thanks

Add comment

Marta Wierzbicka free answered 6 years ago

0 0 Best answer

Hi,

this feature will be released in the next two weeks.

Best, Marta

Add comment

Blazquez pro answered 6 years ago

0 0 Best answer

Hi Marta,

Any update on this?

Regards,

Add comment

Marta Wierzbicka free answered 6 years ago

0 0 Best answer

Hi,

in the past we didn't have a good solution for the layout with sidenav under navbar but I think together with the newest Bootstrap 4.2.1 we will create such a layout in January.

Best,

Marta

Add comment

Ollie Vincent pro answered 7 years ago

1 0 Best answer

<p>Hi all,</p>
<p>I know a few people have been looking for a solution to this - and I think I may be half the way there. It is all about making the sidebar sticky. I will paste the code below for anyone who wants it. I am using MDB 4.5 - please make sure you have the PRO version, and all the js and css files link up correctly (correct file paths).</p>
<p>PLEASE NOTE: I have styled everthing in the <head><style> </style></head> so you will want to put everything into a separate css file. I did this because it was easier to work on 1 file for a demo.</p>
<p>I know sometimes the code editor doesn't always work correctly on this forum (it knocks off spaces) so I have uploaded a demo here: <a href="http://olliev.co.uk/sticky-sidenav/sidebar.html" rel="nofollow">http://olliev.co.uk/sticky-sidenav/sidebar.html</a> which you are welcome to use. Maybe you can rip from the source.</p>
<p>Hope this helps :)</p>
<pre><!DOCTYPE html>

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Sidebar</title>

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<linkhref="css/bootstrap.min.css"rel="stylesheet">

<linkhref="css/mdb.min.css"rel="stylesheet">

<style>

body{overflow-x: hidden; }

.side-nav{ position: sticky!important; top:0!important; height:100vh;

background:purple; box-shadow:none; padding-top: 3rem;}

/* footer.page-footer{position:sticky; top:0; z-index: 999999; bottom:auto;} */

.navbar.fixed-top{z-index: 999999999;}

.fixed-top{position: sticky !important;}

main{margin-top:-100vh; }

header, main, footer {

padding-left: 240px;

}

@media(max-width:900px)

{.side-nav{ position:fixed !important; margin-bottom: 0; top:0; padding-top:5rem;}

header, main, footer {

padding-left: 0;

}

main{margin-top:0;}

}

@media(min-width: 901px){

.menu-btn{display: none!important;}

}

</style>

</head>

<body>

<divclass="float-left">

<ahref="#"data-activates="slide-out"class="button-collapse">

<iclass="fa fa-bars"></i>

</a>

</div>

<divclass="breadcrumb-dn mr-auto">

<p>Material Design for Bootstrap</p>

</div>

<ulclass="nav navbar-nav nav-flex-icons ml-auto">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-envelope"></i>

<spanclass="clearfix d-none d-sm-inline-block">Contact</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-comments-o"></i>

<spanclass="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-user"></i>

<spanclass="clearfix d-none d-sm-inline-block">Account</span>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"href="#"id="navbarDropdownMenuLink"data-toggle="dropdown"

aria-haspopup="true"aria-expanded="false">

Dropdown

</a>

<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</nav>

<divid="slide-out"class=" side-nav fixed ">

<ulclass="custom-scrollbar">

<li>

<divclass="logo-wrapper waves-light">

<ahref="#">

<imgsrc="https://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">

</a>

</div>

</li>

<li>

<ulclass="social">

<li>

<ahref="#"class="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm gplus-ic">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<li>

<formclass="search-form"role="search">

<divclass="form-group md-form mt-0 pt-1 waves-light">

<inputtype="text"class="form-control"placeholder="Search">

</div>

</form>

</li>

<li>

<ulclass="collapsible collapsible-accordion">

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-chevron-right"></i> Submit blog

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">Submit listing</a>

</li>

<li>

<ahref="#"class="waves-effect">Registration form</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-hand-pointer-o"></i> Instruction

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">For bloggers</a>

</li>

<li>

<ahref="#"class="waves-effect">For authors</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-eye"></i> About

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">Introduction</a>

</li>

<li>

<ahref="#"class="waves-effect">Monthly meetings</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-envelope-o"></i> Contact me

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

</ul>

</div>

</li>

</ul>

</li>

</ul>

</div>

<main>

<divclass="view overlay">

<imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg"class="img-fluid "alt="">

<divclass="mask flex-center rgba-red-strong">

<pclass="white-text">Strong overlay</p>

</div>

<divclass="container">

<sectionclass="pb-5">

<h2class="text-center h1 py-5">Our amazing team</h2>

<pclass="grey-text pb-5 text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,

veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

<divclass="row">

<divclass="col-lg-4 col-md-12 mb-4">

<divclass="card-wrapper">

<divid="card-1"class="card-rotating effect__click text-center w-100 h-100">

<divclass="face front">

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Others/images/19.jpg"alt="Team member card image">

</div>

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg"class="rounded-circle img-fluid"alt="First sample avatar image">

</div>

<divclass="card-body">

<h4class="mt-1">Maria Kate</h4>

<pclass="font-weight-bold dark-grey-text">Photographer</p>

<aclass="rotate-btn grey-text"data-card="card-1">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

<divclass="face back">

<divclass="card-body">

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<aclass="rotate-btn grey-text"data-card="card-1">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

</div>

</div>

</div>

<divclass="col-lg-4 col-md-12 mb-4">

<divclass="card-wrapper">

<divid="card-2"class="card-rotating effect__click text-center w-100 h-100">

<divclass="face front">

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Others/images/82.jpg."alt="Team member card image">

</div>

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"class="rounded-circle img-fluid"alt="Second sample avatar image">

</div>

<divclass="card-body">

<h4class="mt-1">Anna Deynah</h4>

<pclass="font-weight-bold dark-grey-text">Web Designer</p>

<aclass="rotate-btn grey-text"data-card="card-2">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

<divclass="face back">

<divclass="card-body">

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<aclass="rotate-btn grey-text"data-card="card-2">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

</div>

</div>

</div>

<divclass="col-lg-4 col-md-12 mb-4">

<divclass="card-wrapper">

<divid="card-3"class="card-rotating effect__click text-center w-100 h-100">

<divclass="face front">

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"alt="Team member card image">

</div>

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg"class="rounded-circle img-fluid"alt="Third sample avatar image">

</div>

<divclass="card-body">

<h4class="mt-1">John Doe</h4>

<pclass="font-weight-bold dark-grey-text">Front-end Developer</p>

<aclass="rotate-btn grey-text"data-card="card-3">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

<divclass="face back">

<divclass="card-body">

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<aclass="rotate-btn grey-text"data-card="card-3">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

</div>

</div>

</div>

</div>

</section>

</div>

<divclass="full-bg-img">

<divclass="mask rgba-white-light">

<divclass="container flex-center text-center">

<divclass="row mt-5">

<divclass="col-md-12 wow fadeIn mb-3">

<h1class="display-1 mb-2 wow fadeInDown"data-wow-delay="0.3s">NATALIE

<aclass="indigo-text font-weight-bold">SMITH</a>

</h1>

<h5class="text-uppercase mb-3 mt-1 font-weight-bold wow fadeIn"data-wow-delay="0.4s">Web developer & graphic designer</h5>

<aclass="btn btn-light-blue btn-lg wow fadeIn"data-wow-delay="0.4s">portfolio</a>

<aclass="btn btn-indigo btn-lg wow fadeIn"data-wow-delay="0.4s">About me</a>

</div>

</main>

<divclass="container text-center text-md-left">

<divclass="row text-center text-md-left mt-3 pb-3">

<divclass="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Company name</h6>

<p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur

adipisicing elit.</p>

</div>

<hrclass="w-100 clearfix d-md-none">

<divclass="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Products</h6>

<p>

<ahref="#!">MDBootstrap</a>

</p>

<p>

<ahref="#!">MDWordPress</a>

</p>

<p>

<ahref="#!">BrandFlow</a>

</p>

<p>

<ahref="#!">Bootstrap Angular</a>

</p>

</div>

<hrclass="w-100 clearfix d-md-none">

<divclass="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Useful links</h6>

<p>

<ahref="#!">Your Account</a>

</p>

<p>

<ahref="#!">Become an Affiliate</a>

</p>

<p>

<ahref="#!">Shipping Rates</a>

</p>

<p>

<ahref="#!">Help</a>

</p>

</div>

<hrclass="w-100 clearfix d-md-none">

<divclass="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Contact</h6>

<p>

<iclass="fa fa-home mr-3"></i> New York, NY 10012, US</p>

<p>

<iclass="fa fa-envelope mr-3"></i> info@gmail.com</p>

<p>

<iclass="fa fa-phone mr-3"></i> + 01 234 567 88</p>

<p>

<iclass="fa fa-print mr-3"></i> + 01 234 567 89</p>

</div>

</div>

<hr>

<divclass="row py-3 d-flex align-items-center">

<divclass="col-md-8 col-lg-8">

<ahref="https://mdbootstrap.com/material-design-for-bootstrap/">

<strong> MDBootstrap.com</strong>

</a>

</p>

</div>

<divclass="col-md-4 col-lg-4 ml-lg-0">

<divclass="text-center text-md-right">

<ulclass="list-unstyled list-inline">

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-linkedin"></i>

</a>

</li>

</ul>

</div>

</div>

</div>

</footer>

<scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script>

<scripttype="text/javascript"src="js/popper.min.js"></script>

<scripttype="text/javascript"src="js/bootstrap.min.js"></script>

<scripttype="text/javascript"src="js/mdb.js"></script>

$(".button-collapse").sideNav();

// SideNav Scrollbar Initialization

varsideNavScrollbar = document.querySelector('.custom-scrollbar');

Ps.initialize(sideNavScrollbar);</script>

</body>

</html></pre>

Please insert min. 20 characters.

Hi all,

I know a few people have been looking for a solution to this - and I think I may be half the way there. It is all about making the sidebar sticky. I will paste the code below for anyone who wants it. I am using MDB 4.5 - please make sure you have the PRO version, and all the js and css files link up correctly (correct file paths).

PLEASE NOTE: I have styled everthing in the <head><style> </style></head> so you will want to put everything into a separate css file. I did this because it was easier to work on 1 file for a demo.

I know sometimes the code editor doesn't always work correctly on this forum (it knocks off spaces) so I have uploaded a demo here: http://olliev.co.uk/sticky-sidenav/sidebar.html which you are welcome to use. Maybe you can rip from the source.

Hope this helps :)

<!DOCTYPE html>

<html lang="en">

<head>

<metacharset="UTF-8">

<metaname="viewport"content="width=device-width, initial-scale=1.0">

<metahttp-equiv="X-UA-Compatible"content="ie=edge">

<title>Sidebar</title>

<linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Bootstrap core CSS -->

<linkhref="css/bootstrap.min.css"rel="stylesheet">

<!-- Material Design Bootstrap -->

<linkhref="css/mdb.min.css"rel="stylesheet">

<style>

body{overflow-x: hidden; }

.side-nav{ position: sticky!important; top:0!important; height:100vh;

background:purple; box-shadow:none; padding-top: 3rem;}

/* footer.page-footer{position:sticky; top:0; z-index: 999999; bottom:auto;} */

.navbar.fixed-top{z-index: 999999999;}

.fixed-top{position: sticky !important;}

main{margin-top:-100vh; }

header, main, footer {

padding-left: 240px;

}

@media(max-width:900px)

{.side-nav{ position:fixed !important; margin-bottom: 0; top:0; padding-top:5rem;}

header, main, footer {

padding-left: 0;

}

main{margin-top:0;}

}

@media(min-width: 901px){

.menu-btn{display: none!important;}

}

 

</style>

 

 

</head>

<body>

 

<nav class="navbar fixed-top black navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">

<!-- SideNav slide-out button -->

<divclass="float-left">

<ahref="#"data-activates="slide-out"class="button-collapse">

<iclass="fa fa-bars"></i>

</a>

</div>

<!-- Breadcrumb-->

<divclass="breadcrumb-dn mr-auto">

<p>Material Design for Bootstrap</p>

</div>

<ulclass="nav navbar-nav nav-flex-icons ml-auto">

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-envelope"></i>

<spanclass="clearfix d-none d-sm-inline-block">Contact</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-comments-o"></i>

<spanclass="clearfix d-none d-sm-inline-block">Support</span>

</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-effect waves-light">

<iclass="fa fa-user"></i>

<spanclass="clearfix d-none d-sm-inline-block">Account</span>

</a>

</li>

<liclass="nav-item dropdown">

<aclass="nav-link dropdown-toggle waves-effect waves-light"href="#"id="navbarDropdownMenuLink"data-toggle="dropdown"

aria-haspopup="true"aria-expanded="false">

Dropdown

</a>

<divclass="dropdown-menu dropdown-menu-right"aria-labelledby="navbarDropdownMenuLink">

<aclass="dropdown-item waves-effect waves-light"href="#">Action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Another action</a>

<aclass="dropdown-item waves-effect waves-light"href="#">Something else here</a>

</div>

</li>

</ul>

</nav>

<!-- Sidebar navigation -->

<divid="slide-out"class=" side-nav fixed ">

<ulclass="custom-scrollbar">

<!-- Logo -->

<li>

<divclass="logo-wrapper waves-light">

<ahref="#">

<imgsrc="https://mdbootstrap.com/img/logo/mdb-transparent.png"class="img-fluid flex-center">

</a>

</div>

</li>

<!--/. Logo -->

<!--Social-->

<li>

<ulclass="social">

<li>

<ahref="#"class="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm gplus-ic">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<li>

<ahref="#"class="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

</li>

<!--/Social-->

<!--Search Form-->

<li>

<formclass="search-form"role="search">

<divclass="form-group md-form mt-0 pt-1 waves-light">

<inputtype="text"class="form-control"placeholder="Search">

</div>

</form>

</li>

<!--/.Search Form-->

<!-- Side navigation links -->

<li>

<ulclass="collapsible collapsible-accordion">

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-chevron-right"></i> Submit blog

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">Submit listing</a>

</li>

<li>

<ahref="#"class="waves-effect">Registration form</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-hand-pointer-o"></i> Instruction

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">For bloggers</a>

</li>

<li>

<ahref="#"class="waves-effect">For authors</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-eye"></i> About

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">Introduction</a>

</li>

<li>

<ahref="#"class="waves-effect">Monthly meetings</a>

</li>

</ul>

</div>

</li>

<li>

<aclass="collapsible-header waves-effect arrow-r">

<iclass="fa fa-envelope-o"></i> Contact me

<iclass="fa fa-angle-down rotate-icon"></i>

</a>

<divclass="collapsible-body">

<ul>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

<li>

<ahref="#"class="waves-effect">FAQ</a>

</li>

<li>

<ahref="#"class="waves-effect">Write a message</a>

</li>

</ul>

</div>

</li>

 

 

</ul>

</li>

<!--/. Side navigation links -->

</ul>

</div>

<!--/. Sidebar navigation -->

 

<main>

 

<divclass="view overlay">

<imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg"class="img-fluid "alt="">

<divclass="mask flex-center rgba-red-strong">

<pclass="white-text">Strong overlay</p>

</div>

</div>

 

 

<divclass="container">

<!--Section: Team v.4-->

<sectionclass="pb-5">

 

<!--Section heading-->

<h2class="text-center h1 py-5">Our amazing team</h2>

<!--Section description-->

<pclass="grey-text pb-5 text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, error amet numquam iure provident voluptate esse quasi,

veritatis totam voluptas nostrum quisquam eum porro a pariatur accusamus veniam.</p>

 

<divclass="row">

 

<!--Grid column-->

<divclass="col-lg-4 col-md-12 mb-4">

 

<!--Rotating card-->

<divclass="card-wrapper">

<divid="card-1"class="card-rotating effect__click text-center w-100 h-100">

 

<!--Front Side-->

<divclass="face front">

 

<!-- Image-->

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Others/images/19.jpg"alt="Team member card image">

</div>

 

<!--Avatar-->

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (10).jpg"class="rounded-circle img-fluid"alt="First sample avatar image">

</div>

 

<!--Content-->

<divclass="card-body">

<h4class="mt-1">Maria Kate</h4>

<pclass="font-weight-bold dark-grey-text">Photographer</p>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-1">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

 

</div>

<!--Front Side-->

 

<!--Back Side-->

<divclass="face back">

 

<!--Content-->

<divclass="card-body">

 

<!--Content-->

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<!--Social Icons-->

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-1">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

 

</div>

 

</div>

<!--Back Side-->

 

</div>

</div>

<!--Rotating card-->

 

</div>

<!--Grid column-->

 

<!--Grid column-->

<divclass="col-lg-4 col-md-12 mb-4">

 

<!--Rotating card-->

<divclass="card-wrapper">

<divid="card-2"class="card-rotating effect__click text-center w-100 h-100">

 

<!--Front Side-->

<divclass="face front">

 

<!-- Image-->

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Others/images/82.jpg."alt="Team member card image">

</div>

 

<!--Avatar-->

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (20).jpg"class="rounded-circle img-fluid"alt="Second sample avatar image">

</div>

 

<!--Content-->

<divclass="card-body">

<h4class="mt-1">Anna Deynah</h4>

<pclass="font-weight-bold dark-grey-text">Web Designer</p>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-2">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

 

</div>

<!--Front Side-->

 

<!--Back Side-->

<divclass="face back">

 

<!--Content-->

<divclass="card-body">

 

<!--Content-->

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<!--Social Icons-->

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-2">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

 

</div>

 

</div>

<!--Back Side-->

 

</div>

</div>

<!--Rotating card-->

 

</div>

<!--Grid column-->

 

<!--Grid column-->

<divclass="col-lg-4 col-md-12 mb-4">

 

<!--Rotating card-->

<divclass="card-wrapper">

<divid="card-3"class="card-rotating effect__click text-center w-100 h-100">

 

<!--Front Side-->

<divclass="face front">

 

<!-- Image-->

<divclass="card-up">

<imgsrc="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(14).jpg"alt="Team member card image">

</div>

 

<!--Avatar-->

<divclass="avatar mx-auto white">

<imgsrc="https://mdbootstrap.com/img/Photos/Avatars/img (8).jpg"class="rounded-circle img-fluid"alt="Third sample avatar image">

</div>

 

<!--Content-->

<divclass="card-body">

<h4class="mt-1">John Doe</h4>

<pclass="font-weight-bold dark-grey-text">Front-end Developer</p>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-3">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate</a>

</div>

 

</div>

<!--Front Side-->

 

<!--Back Side-->

<divclass="face back">

 

<!--Content-->

<divclass="card-body">

 

<!--Content-->

<h4class="font-weight-bold mt-4 mb-2">

<strong>About me</strong>

</h4>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis

rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum

eum, officia laudantium quaerat?

</p>

<hr>

<!--Social Icons-->

<ulclass="list-inline list-unstyled">

<liclass="list-inline-item">

<aclass="icons-sm fb-ic">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm pin-ic">

<iclass="fa fa-pinterest"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm ins-ic">

<iclass="fa fa-instagram"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="icons-sm tw-ic">

<iclass="fa fa-twitter"></i>

</a>

</li>

</ul>

<!--Triggering button-->

<aclass="rotate-btn grey-text"data-card="card-3">

<iclass="fa fa-repeat grey-text"></i> Click here to rotate back</a>

 

</div>

 

</div>

<!--Back Side-->

 

</div>

</div>

<!--Rotating card-->

 

</div>

<!--Grid column-->

 

</div>

 

</section>

<!--Section: Team v.4-->

</div>

<div class="view jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); height: 20vh;">

<divclass="full-bg-img">

<divclass="mask rgba-white-light">

<divclass="container flex-center text-center">

<divclass="row mt-5">

<divclass="col-md-12 wow fadeIn mb-3">

<h1class="display-1 mb-2 wow fadeInDown"data-wow-delay="0.3s">NATALIE

<aclass="indigo-text font-weight-bold">SMITH</a>

</h1>

<h5class="text-uppercase mb-3 mt-1 font-weight-bold wow fadeIn"data-wow-delay="0.4s">Web developer & graphic designer</h5>

<aclass="btn btn-light-blue btn-lg wow fadeIn"data-wow-delay="0.4s">portfolio</a>

<aclass="btn btn-indigo btn-lg wow fadeIn"data-wow-delay="0.4s">About me</a>

</div>

</div>

</div>

</div>

</div>

</div>

</main>

<div id="stop"></div>

 

<!--Footer-->

<footer class="page-footer font-small stylish-color-dark pt-4 ">

<!--Footer Links-->

<divclass="container text-center text-md-left">

<!-- Footer links -->

<divclass="row text-center text-md-left mt-3 pb-3">

<!--First column-->

<divclass="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Company name</h6>

<p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur

adipisicing elit.</p>

</div>

<!--/.First column-->

<hrclass="w-100 clearfix d-md-none">

<!--Second column-->

<divclass="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Products</h6>

<p>

<ahref="#!">MDBootstrap</a>

</p>

<p>

<ahref="#!">MDWordPress</a>

</p>

<p>

<ahref="#!">BrandFlow</a>

</p>

<p>

<ahref="#!">Bootstrap Angular</a>

</p>

</div>

<!--/.Second column-->

<hrclass="w-100 clearfix d-md-none">

<!--Third column-->

<divclass="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Useful links</h6>

<p>

<ahref="#!">Your Account</a>

</p>

<p>

<ahref="#!">Become an Affiliate</a>

</p>

<p>

<ahref="#!">Shipping Rates</a>

</p>

<p>

<ahref="#!">Help</a>

</p>

</div>

<!--/.Third column-->

<hrclass="w-100 clearfix d-md-none">

<!--Fourth column-->

<divclass="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">

<h6class="text-uppercase mb-4 font-weight-bold">Contact</h6>

<p>

<iclass="fa fa-home mr-3"></i> New York, NY 10012, US</p>

<p>

<iclass="fa fa-envelope mr-3"></i> info@gmail.com</p>

<p>

<iclass="fa fa-phone mr-3"></i> + 01 234 567 88</p>

<p>

<iclass="fa fa-print mr-3"></i> + 01 234 567 89</p>

</div>

<!--/.Fourth column-->

</div>

<!-- Footer links -->

<hr>

<divclass="row py-3 d-flex align-items-center">

<!--Grid column-->

<divclass="col-md-8 col-lg-8">

<!--Copyright-->

<pclass="text-center text-md-left grey-text">© 2017 Copyright:

<ahref="https://mdbootstrap.com/material-design-for-bootstrap/">

<strong> MDBootstrap.com</strong>

</a>

</p>

<!--/.Copyright-->

</div>

<!--Grid column-->

<!--Grid column-->

<divclass="col-md-4 col-lg-4 ml-lg-0">

<!--Social buttons-->

<divclass="text-center text-md-right">

<ulclass="list-unstyled list-inline">

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-facebook"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-twitter"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-google-plus"></i>

</a>

</li>

<liclass="list-inline-item">

<aclass="btn-floating btn-sm rgba-white-slight mx-1">

<iclass="fa fa-linkedin"></i>

</a>

</li>

</ul>

</div>

<!--/.Social buttons-->

</div>

<!--Grid column-->

</div>

</div>

</footer>

<!--/.Footer-->

 

<!-- JQuery -->

<scripttype="text/javascript"src="js/jquery-3.2.1.min.js"></script>

<!-- Bootstrap tooltips -->

<scripttype="text/javascript"src="js/popper.min.js"></script>

<!-- Bootstrap core JavaScript -->

<scripttype="text/javascript"src="js/bootstrap.min.js"></script>

<!-- MDB core JavaScript -->

<scripttype="text/javascript"src="js/mdb.js"></script>

<script>// SideNav Button Initialization

$(".button-collapse").sideNav();

// SideNav Scrollbar Initialization

varsideNavScrollbar = document.querySelector('.custom-scrollbar');

Ps.initialize(sideNavScrollbar);</script>

</body>

</html>

Add comment

nzeditions pro answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, about 9 months ago, you (Marta Szymanska) said above, that you would have the team consider adding this type of layout in the future, that layout type being... a sidebar that fits underneath the navbar as in the example shown in the link above... https://wrapbootstrap.com/theme/angle-bootstrap-admin-template-WB04HF123 Has there been any advancement on this idea yet? We would appreciate it if you could provide an update on this feature as to whether it has been considered yet or not please. Totally understand the complexities of making this an option for your users but as mentioned by others, this kind of layout is quite popular and would be another positive to the MDB package as a whole. Thank you for your help and consideration :) Regards, Grant

jivancic pro commented 8 years ago

Completely agree .

hbs pro commented 7 years ago

Yeah, would be nice to have it

Chen free commented 7 years ago

Also would love to have that

velodude free commented 6 years ago

This ask started a couple years ago -- how about it MDB, any progress? I'm sure there are thousands of us who would love this...

Add comment

Marta Wierzbicka free answered 8 years ago

0 0 Best answer

Hello Jonathan, we will think about this type of layout and add this in the future. Best, Marta

ljacobsen free commented 8 years ago

I also would prefer this type of layout. It's much better to keep the brand icon permanently visible on the navbar.

Add comment

Jonathan Yates pro answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

I am also wanting to have the same layout with the sidebar below the top navbar. I think this looks much better than having it span the full height of the page. I'm seeing more and more templates like this and really like the layout, particularly for admin sites. Something like this: https://wrapbootstrap.com/theme/angle-bootstrap-admin-template-WB04HF123 It would be really nice for mdbootstrap to include an example of this layout in their page layouts section and also provide an admin template like this as an alternative to the existing one which uses he full page height sidebar.

Add comment

think pro answered 9 years ago

0 0 Best answer

Thank you so much!!

Add comment

Marta Wierzbicka free answered 9 years ago

0 0 Best answer

For MDB3 you can add this code in your CSS file:

.side-nav {
              margin-top: 60px;
            }
        
        .navbar {
            z-index: 1000; 
        }

Add comment

think pro answered 9 years ago

0 0 Best answer

Thank you! I am actually using MDBootstrap 3 however, and I don't think those classes are instituted in v3. How would I accomplish this in MDB3?

Add comment

Marta Wierzbicka free answered 9 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi, if you have our a double navigation and use our skins, you can remove fixed-sn from E.G. <body class="fixed-sn blue-skin"> and then in CSS file you can paste this code:

.side-nav {
  margin-top: 51px;
}

@media only screen and (max-width: 768px) {
  .side-nav {
    margin-top: 41px;
  }
}

.double-nav {
  z-index: 1000;
}

@media only screen and (max-width: 1024px) {
  .double-nav .breadcrumb-dn {
    display: none;
  }
}

This solution should help in some way.

Add comment

think pro answered 9 years ago

0 0 Best answer

Yep! Still haven't figured it out yet. Any help would be appreciated!

Add comment

Bartłomiej Malanowski staff answered 9 years ago

0 0 Best answer

Do you still have the problem?

Add comment

think pro answered 9 years ago

0 0 Best answer

My mistake! I didn't realize that the images had compressed: Current Navbar: https://drive.google.com/open?id=0BwSA-cb3fCgaUUhRYVVPNV9uZW8 Desired Navbar https://drive.google.com/open?id=0BwSA-cb3fCgaV2dFVVU0U2o4NTQ Thanks again for the help!