Sidebar And Navbar Overlapping
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: 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!
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:
<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>
Post a Comment for "Sidebar And Navbar Overlapping"