Sidebar and navbar overlapping

Question

I'm developing an admin panel for a project of mine. I made a sidebar and added a standard bootstrap 4 navbar. But there is a slight problem. My bootstrap 4 navbar is displaying in full width of the entire page, I'm trying to make it the full width of the column so both the navigation bars don't overlap.

Here is a small demonstration of what I am trying to accomplish:

With my current code, the main navbar is overlapping the sidebar. How can I fix this?

 /* ALGEMNEEN*/ .first-container { margin-top: 70px !important; } .mb-6 { margin-bottom: 6rem; } .mb-3rem { margin-bottom: 0.3rem; } .fa-font-size { font-size: 26px; } .fa-font-24 { font-size: 24px; color: black; } .register-container { margin-top: 20px !important; } .normal-container { margin-top: 25px !important; } .btn-theme { background-color: #283593 !important; color: white; border-radius: 3px; cursor: pointer; } .btn-user-add { position: absolute; bottom: 0; right: 0; margin-right: 15px; } .card-block { padding: 1.25rem; } .name-tag { color: #283593 !important; font-weight: bold; } .name-tag:hover { text-decoration: none; color: #444444 !important; } .title { color: black !important; } .title:hover { text-decoration: none; color: #555555 !important; } #showEffect { display: none; } .level { display: flex; align-items: center; } [v-cloak] { display: none; } .btn-notliked { background-color: transparent; color: black; outline: none; border: none; } .btn-liked { background-color: transparent; color: #283593; border: none; outline: none; cursor: pointer; padding: 0; } .btn-both { background-color: transparent; border: none; outline: none; cursor: pointer; padding: 0; } .card-custom { border: none; border-bottom: 1px solid #f1f1f0 !important; cursor: pointer; } .btn-destroy { background-color: transparent; border: none; color: black; } .btn-edit { background-color: transparent; border: none; color: black; } .card-blue { background-color: #21A6E2; border-radius: 7px; border: 0; color: white; } .card-footer-blue { background-color: #2194CA; padding-top: 2px; padding-bottom: 2px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #a1dcf6; } .card-footer-blue>a { color: #a1dcf6; } .card-footer-blue>a:hover { color: white; text-decoration: none; } .card-green { background-color: #28B779; border-radius: 5px; border: 0; color: white; } .card-footer-green { background-color: #10A062; padding-top: 2px; padding-bottom: 2px; color: #88cdaf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-green>a { color: #88cdaf; } .card-footer-green>a:hover { color: white; text-decoration: none; } .card-purple { background-color: #852C9A; border-radius: 5px; border: 0; color: white; } .card-footer-purple { background-color: #751E89; padding-top: 2px; padding-bottom: 2px; color: #b46ec5; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-purple>a { color: #b46ec5; } .card-footer-purple>a:hover { color: white; text-decoration: none; } .card-yellow { background-color: #FFB849; border-radius: 5px; border: 0; color: white; } .card-footer-yellow { background-color: #eba025; padding-top: 2px; padding-bottom: 2px; color: white; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-yellow>a { color: #ffe0ad; } .card-footer-yellow>a:hover { color: white; text-decoration: none; } .fnt-46 { font-size: 46px; } /*EINDE ALGEMEEN*/ /* NAVBAR STYLES */ .navbar { border-top: 3px solid #283593; } .border-none { border: none; } .navbar>ul>li>a { color: black !important; } .navbar-panel .navbar-nav .nav-link { color: black !important; } .nav-register-btn { background-color: #283593; color: #ffffff !important; border-radius: 3px; } .navbar .navbar-toggler { border: none; color: #283593; } .btn-hover:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn-search { background-color: #283593; color: #FFFFFF; cursor: pointer; } .nav-search { background-color: #e3ebef; color: #747F8B; } .fa-skype { color: #283593; } .fa-skype:hover { color: #00B0E8; } .form-inline { width: 64%; display: flex; justify-content: center; } .form-inline #search { width: 55%; } .search-input { margin-right: 10px; } .sidebar { position: fixed; left: 0; height: 100%; z-index: 1000; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #2B303C; padding-right: 0; padding-left: 0; width: 100%; } .sidebar a { color: #fff; } .sidebar a:hover { color: lightgrey; border-radius: 0; } .sidebar li:hover { background-color: #373C47; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .custom-active { color: #333333 !important; background-color: #f9f2f4; border-left: 1px solid black; } .banner-background { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); background-color: #373C47; background-size: cover; width: 100%; margin-top: -12px; } .nav-pills .nav-item+.nav-item { margin: 0; } .nav-pills .nav-link { border-radius: 0; } .fa-lg { margin: 6px auto; } /* EINDE NAVBAR STYLESS*/ /*LOGIN PAGINA*/ .login-card { display: none; border-radius: 7px; } .login-card form i.fa { position: absolute; top: 7px; left: 32px; color: #283593; font-size: 22px; z-index: 9999; } .fw-3 { font-weight: 300; } .form-control-login { position: relative; padding-left: 45px !important; } /*EINDE LOGIN PAGINA*/ /*REGISTER PAGINA*/ .register-card { display: none; border-radius: 7px; } .btn-popover { padding: 0; float: right; background-color: transparent; } .btn-popover .fa { font-size: 20px; } /*EINDE REGISTER PAGINA*/ /* ALLE SCHADUWEN */ .z-depth-half { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -3px rgba(0, 0, 0, 0.1); } .z-depth-1 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .z-depth-1-half { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); } .z-depth-2 { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .btn:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } /* EINDE ALLE SCHADUWEN*/ 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="row"> <div class="col-md-2"> <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar z-depth-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item mb-2 banner-background"> <a href="" class="nav-link text-center" style="color: white; margin-top: 10px;"> Test </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-dashboard fa-lg float-left mr-2"></i> <span class="float-left">Dashboard</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-desktop fa-lg float-left mr-2"></i> <span class="float-left">Berichten</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-users fa-lg float-left mr-2"></i> <span class="float-left">Gebruikers</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-comments fa-lg float-left mr-2"></i> <span class="float-left">Reacties</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-mail-reply fa-lg float-left mr-2"></i> <span class="float-left">Terug</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> </ul> </nav> </div> <div class="col-md-10"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-lg navbar-light fixed-top z-depth-1 border-none" style="background-color: #ffffff"> <div class="container-fluid" style="padding-left: 0;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="" class="nav-link" style="padding-left: 0;"></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link"> <i class="fa fa-envelope-o" style="font-size: 20px; position: relative; top: 3px;"></i> </a> </li> <li class="nav-item ml-3"> <a href="" class="nav-link"> <i class="fa fa-bell-o" style="font-size: 20px; position: relative; top: 3px;"></i> </a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-only">John Doe</span> </a> <div class="dropdown-menu pull-right" aria-labelledby="navbarDropdown"> <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> </div> </div> </nav> </div> </div> </div> </div> 

Thanks in advance!

Answer 1

Hey there Sebastian Bosch!

please test the code on your computer to see if this is the result you are looking for(stack overflow's has a hard time showing the result!):

 .btn-notliked { background-color: transparent; color: black; outline: none; border: none; } .btn-liked { background-color: transparent; color: #283593; border: none; outline: none; cursor: pointer; padding: 0; } .btn-both { background-color: transparent; border: none; outline: none; cursor: pointer; padding: 0; } .card-custom { border: none; border-bottom: 1px solid #f1f1f0 !important; cursor: pointer; } .btn-destroy { background-color: transparent; border: none; color: black; } .btn-edit { background-color: transparent; border: none; color: black; } .card-blue { background-color: #21A6E2; border-radius: 7px; border: 0; color: white; } .card-footer-blue { background-color: #2194CA; padding-top: 2px; padding-bottom: 2px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #a1dcf6; } .card-footer-blue>a { color: #a1dcf6; } .card-footer-blue>a:hover { color: white; text-decoration: none; } .card-green { background-color: #28B779; border-radius: 5px; border: 0; color: white; } .card-footer-green { background-color: #10A062; padding-top: 2px; padding-bottom: 2px; color: #88cdaf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-green>a { color: #88cdaf; } .card-footer-green>a:hover { color: white; text-decoration: none; } .card-purple { background-color: #852C9A; border-radius: 5px; border: 0; color: white; } .card-footer-purple { background-color: #751E89; padding-top: 2px; padding-bottom: 2px; color: #b46ec5; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-purple>a { color: #b46ec5; } .card-footer-purple>a:hover { color: white; text-decoration: none; } .card-yellow { background-color: #FFB849; border-radius: 5px; border: 0; color: white; } .card-footer-yellow { background-color: #eba025; padding-top: 2px; padding-bottom: 2px; color: white; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } .card-footer-yellow>a { color: #ffe0ad; } .card-footer-yellow>a:hover { color: white; text-decoration: none; } .fnt-46 { font-size: 46px; } /*EINDE ALGEMEEN*/ /* NAVBAR STYLES */ .navbar { border-top: 3px solid #283593; margin-left: 16.7%; width: 83.8%; z-index: -1 } .border-none { border: none; } .navbar>ul>li>a { color: black !important; } .navbar-panel .navbar-nav .nav-link { color: black !important; } .nav-register-btn { background-color: #283593; color: #ffffff !important; border-radius: 3px; } .navbar .navbar-toggler { border: none; color: #283593; } .btn-hover:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); cursor: pointer; } .btn-search { background-color: #283593; color: #FFFFFF; cursor: pointer; } .nav-search { background-color: #e3ebef; color: #747F8B; } .fa-skype { color: #283593; } .fa-skype:hover { color: #00B0E8; } .form-inline { width: 64%; display: flex; justify-content: center; } .form-inline #search { width: 55%; } .search-input { margin-right: 10px; } .sidebar { position: fixed; left: 0; height: 100%; z-index: 1000; padding: 20px; overflow-x: hidden; overflow-y: auto; background-color: #2B303C; padding-right: 0; padding-left: 0; width: 100%; } .sidebar a { color: #fff; } .sidebar a:hover { color: lightgrey; border-radius: 0; } .sidebar li:hover { background-color: #373C47; box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .custom-active { color: #333333 !important; background-color: #f9f2f4; border-left: 1px solid black; } .banner-background { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); background-color: #373C47; background-size: cover; width: 100%; margin-top: -12px; } .nav-pills .nav-item+.nav-item { margin: 0; } .nav-pills .nav-link { border-radius: 0; } .fa-lg { margin: 6px auto; } /* EINDE NAVBAR STYLESS*/ /*LOGIN PAGINA*/ .login-card { display: none; border-radius: 7px; } .login-card form i.fa { position: absolute; top: 7px; left: 32px; color: #283593; font-size: 22px; z-index: 9999; } .fw-3 { font-weight: 300; } .form-control-login { position: relative; padding-left: 45px !important; } /*EINDE LOGIN PAGINA*/ /*REGISTER PAGINA*/ .register-card { display: none; border-radius: 7px; } .btn-popover { padding: 0; float: right; background-color: transparent; } .btn-popover .fa { font-size: 20px; } /*EINDE REGISTER PAGINA*/ /* ALLE SCHADUWEN */ .z-depth-half { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -3px rgba(0, 0, 0, 0.1); } .z-depth-1 { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2); } .z-depth-1-half { box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 7px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -1px rgba(0, 0, 0, 0.2); } .z-depth-2 { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } .btn:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3); } /* EINDE ALLE SCHADUWEN*/ 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <div class="row"> <div class="col-md-2"> <nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar z-depth-3"> <ul class="nav nav-pills flex-column"> <li class="nav-item mb-2 banner-background"> <a href="" class="nav-link text-center" style="color: white; margin-top: 10px;"> Test </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-dashboard fa-lg float-left mr-2"></i> <span class="float-left">Dashboard</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-desktop fa-lg float-left mr-2"></i> <span class="float-left">Berichten</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-users fa-lg float-left mr-2"></i> <span class="float-left">Gebruikers</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-comments fa-lg float-left mr-2"></i> <span class="float-left">Reacties</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> <li class="nav-item mb-3rem p-2"> <a class="nav-link text-center" href=""> <i class="fa fa-mail-reply fa-lg float-left mr-2"></i> <span class="float-left">Terug</span> <i class="fa fa-angle-right fa-lg float-right"></i> </a> </li> </ul> </nav> </div> <div class="col-md-10"> <div class="row"> <div class="col-md-12"> <nav class="navbar navbar-expand-lg navbar-light fixed-top z-depth-1 border-none" style="background-color: #ffffff"> <div class="container-fluid" style="padding-left: 0;"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="" class="nav-link" style="padding-left: 0;"></a> </li> </ul> <ul class="navbar-nav"> <li class="nav-item"> <a href="#" class="nav-link"> <i class="fa fa-envelope-o" style="font-size: 20px; position: relative; top: 3px;"></i> </a> </li> <li class="nav-item ml-3"> <a href="" class="nav-link"> <i class="fa fa-bell-o" style="font-size: 20px; position: relative; top: 3px;"></i> </a> </li> <li class="nav-item"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="hidden-xs-only">John Doe</span> </a> <div class="dropdown-menu pull-right" aria-labelledby="navbarDropdown"> <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> </div> </div> </nav> </div> </div> </div> </div> 

to achieve the final effect you want in your website 2 things can be done: 1.- use Z-index to just make the navbar be behind the sidebar. (will make the menu button seem out of place (but can use padding to fix it!)) 2.- change the margin of the navbar so it shrinks to stay out of the sidebar the solution i found was a combination of both.

on rule on line 153:

.navbar {
  border-top: 3px solid #283593;
  margin-left: 16.7%;
  width:83.8%;
  z-index: -1   
}

margin-left: 16.7% sets a percentage to the margin to keep it out of the sight of the sidebar. one problem i found was that at a certain size of the browser the navbar will cover the sidebar again because of bootstrap the sidebar will increase slightly in size, but by using z-index we keep the navbar in place behind the sidebar.

I hope this helps you stay on track. i hope this answer helped you at least an idea of how to solve the problem if not solving it completely.

Have a nice day!

Answer 2

The first thing I'd suggest to you is to stop using a dinosaur version of Bootstrap 4 because compared to beta 3 (the most recent) alpha 6 truly is a dinosaur version. (there were breaking changes even between beta 3 and beta2 ; luckily the next release will be final and won't introduce any breaking changes anymore)

Secondly, I have a snippet with an example of how you can easily achieve what you want (with an up-to-date version of Bootstrap 4). You'll have to adjust the example to your needs. Also, the blue navbar appears under the green ones on small screens but I guess dealing with that (if that needs to be changed) would be a separate question.

Here's the code:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"> <div class="container"> <div class="row"> <div class="col-md-2 bg-success"> <!-- sidebar --> <nav class="navbar navbar-light bg-success"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link3</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link4</a> </li> </ul> </nav> </div><!-- sidebar --> <div class="col-md-10"> <div class="row"> <div class="col-md-12 px-0"> <!-- navbar --> <nav class="navbar navbar-expand-md navbar-light bg-primary"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Link1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link2</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav> </div><!-- navbar --> </div> <div class="row bg-warning"> <div class="col-md-12" style="min-height: 300px;"> <p>content</p> </div><!-- content --> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>