Skip to content Skip to sidebar Skip to footer
Home / Bootstrap 4 / Css / Html

Sidebar And Navbar Overlapping

Post a Comment
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

Solution 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: 04px5px0rgba(0, 0, 0, 0.14), 01px10px0rgba(0, 0, 0, 0.12), 02px4px -1pxrgba(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%;
}

.sidebara {
  color: #fff;
}

.sidebara:hover {
  color: lightgrey;
  border-radius: 0;
}

.sidebarli:hover {
  background-color: #373C47;
  box-shadow: 04px5px0rgba(0, 0, 0, 0.14), 01px10px0rgba(0, 0, 0, 0.12), 02px4px -1pxrgba(0, 0, 0, 0.3);
}

.custom-active {
  color: #333333!important;
  background-color: #f9f2f4;
  border-left: 1px solid black;
}

.banner-background {
  box-shadow: 04px5px0rgba(0, 0, 0, 0.14), 01px10px0rgba(0, 0, 0, 0.12), 02px4px -1pxrgba(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-cardformi.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: 01px1px0rgba(0, 0, 0, 0.14), 01px3px0rgba(0, 0, 0, 0.12), 03px1px -3pxrgba(0, 0, 0, 0.1);
}

.z-depth-1 {
  box-shadow: 02px2px0rgba(0, 0, 0, 0.14), 01px5px0rgba(0, 0, 0, 0.12), 03px1px -2pxrgba(0, 0, 0, 0.2);
}

.z-depth-1-half {
  box-shadow: 03px3px0rgba(0, 0, 0, 0.14), 01px7px0rgba(0, 0, 0, 0.12), 03px1px -1pxrgba(0, 0, 0, 0.2);
}

.z-depth-2 {
  box-shadow: 04px5px0rgba(0, 0, 0, 0.14), 01px10px0rgba(0, 0, 0, 0.12), 02px4px -1pxrgba(0, 0, 0, 0.3);
}

.btn:hover {
  box-shadow: 04px5px0rgba(0, 0, 0, 0.14), 01px10px0rgba(0, 0, 0, 0.12), 02px4px -1pxrgba(0, 0, 0, 0.3);
}


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

Solution 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: 

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

Post a Comment for "Sidebar And Navbar Overlapping"