Menu
I am trying to push down my content whenever a user selects a links with a drop down menu. However, when clicked the dropdown goes over the content rather than pushes it down.
I have tried using position: relatives/position: absolute, etc to achieve some sort of desired result, but no such luck. I have seen other similar questions pertaining to this problem but it still has not helped me.
Any help in solving this problem would be greatly appreciated.
My HTML and CSS
body {
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav>li>a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav>li>a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width: 1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index: 1;
left: 0;
text-align: center;
padding-right: 10px;
position: absolute;
list-style-type: none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left: 10px;
padding-right: 10px;
position: relative;
list-style-type: none;
}
.navbar .dropdown-menu li {
margin: 0;
padding: 0;
display: inline-block;
}
.dropdown-menu>li>a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu>li>a:hover {
color: #333333 !important;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus {
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" crossorigin="anonymous"></script>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>
</li>
<li class="nav-link">
<a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>
</li>
</ul>
</li>
<li class="nav-link"><a href="#">Link</a></li>
<li class="nav-link"><a href="#">Link</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
</body>I have provided a jsfiddle: JSFiddle
352
Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left).
Make your dropdown menu's position: absolute; and then the element under it as position: relative; . If this doesn't work, try to make both the dropdown menu and the element under it as position: absolute; and then set the z-index of the dropdown as higher than the element below it.
Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
Your issue, as you suspected, is the positioning. Unfortunately, if you use position: absolute, .dropdown-menu is removed from the flow of the document, winding up on top of anything beneath it rather than moving it out of the way. If you use position: relative it forces it's parent to resize messing up your menu. As far as I know there is no solution to this problem with pure CSS. However, there is a few solutions with javascript, and since JQuery is already being used by bootstrap, we can just use that.
In order to move the content down when dropdown-menu is clicked you need to change either .container, the content, itself, or the parent/grandparent element that the dropdown-menu is relative to. I chose to add margin-bottom the grandparent, which in this case, is the nav element. You could just as easily add margin-top to .container. Either way you need to set the margin equal to the height of .dropdown-menu which is set to 120px. I created the following rule to achieve this:
nav.navbar.open {
margin-bottom: 120px;
}
The extra class .open will be added by JQuery when li.dropdown is clicked. I just used this quick bit of JQuery to acomplish this:
$("li.dropdown").click(function() {
$("nav.navbar" ).toggleClass( "open");
});
That's all that is needed. When li.dropdown is clicked a .open is added to the nav element which increases its bottom margin to the same height of .dropdown-menu. The margin doesn't affect .dropdown-menu since it's absolutely positioned and instead only pushes down .container just as if .dropdown-menu was not removed from the document flow. The reason for using li.dropdown and not #menu-trigger (the link itself) is because if you use the link, and then click on .dropdown-menu the menu is dismissed, but the margin remains. By using the parent of dropdown-menu the click event is still registered whenever a child of the parent is clicked. If a sibling is used then the trigger doesn't happen.
$("li.dropdown").click(function() {
$("nav.navbar").toggleClass("open");
});body {
margin: 0;
padding: 0;
font-family: "Helvetica", "Arial", sans-serif;
font-weight: 500;
font-style: normal;
font-size: 12px;
line-height: 1.5;
}
.navbar-default {
background-color: #ffffff;
}
.navbar {
min-height: 65px;
padding-top: 5px;
margin-bottom: 0px;
border-bottom: solid 2px #eee;
}
.navbar-header {
margin-top: -12px;
}
.navbar-brand {
padding-top: 0px !important;
}
/* for button placement*/
.navbar-toggle {
margin-top: 26px;
}
/*for collapsed navbar*/
.navbar-collapse {
margin-top: 12px;
}
.site-logo {
max-width: 135px;
min-width: 120px;
}
.navbar-default .navbar-nav > li > a {
text-transform: uppercase;
background-color: #ffffff !important;
color: #333333;
}
.navbar-default .navbar-nav > li > a:hover {
color: #3381d0;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
background-color: #ffffff;
border-bottom: 2px solid #ff5d1c;
color: #ff5d1c;
bottom: -2px;
}
.nav>li {
position: static !important;
}
/* For navbar dropdown*/
.navbar .dropdown-menu {
min-width: 1349px;
width: 100%;
height: 120px;
margin-top: 51px;
z-index: 1;
left: 0;
text-align: center;
padding-right: 10px;
position: absolute;
list-style-type: none;
border-top: 2px solid #ff5d1c;
border-bottom: 2px solid #333333;
border-right: #ffffff;
border-radius: 0;
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
border-left: 0;
background-color: #337ab7;
}
.dropdown-menu {
padding-left: 10px;
padding-right: 10px;
position: relative;
list-style-type: none;
}
.navbar .dropdown-menu li {
margin: 0;
padding: 0;
display: inline-block;
}
.dropdown-menu > li > a {
color: #ffffff;
line-height: 75px;
padding: 3px;
}
.dropdown-menu > li > a:hover {
color: #333333 !important;
}
.dropdown-menu > li > a:hover {
color: #ffffff;
background-color: #337ab7;
}
.m-pub {
display: inline-block;
margin: 3px 40px 0;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .14em;
color: white;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
position: relative;
}
.m-pub:after,
.m-pub:focus {
color: #ffffff;
background-color: #337ab7;
}
.dropdown-menu li .m-pub:hover:after {
content: '';
position: absolute;
left: 50%;
margin-left: -10px;
margin-top: 55px;
border-left: 0;
border-bottom: 17px solid transparent;
border-top: 17px solid transparent;
border-left: 14px solid #333333;
transform: rotate(-90deg);
background: none;
}
nav.navbar.open {
margin-bottom: 120px;
}<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="nav">
<li class="nav-link active"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="menu-trigger">Drop-Down Menu<i class="fa fa-angle-down flipped"></i></a>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<a href="#" class="m-pub"><i class="fa fa-microphone fa-2x"></i>Option</a>
</li>
<li class="nav-link">
<a href="" class="m-pub"><i class="fa fa-newspaper-o fa-2x"></i>Option</a>
</li>
</ul>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
<li class="nav-link"><a href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>The snippet is small enough that it engages the mobile view, so you'll need to view it in full screen. Or you can check out the codepen.
As a note of caution, some of the stylings you have added for .dropdown-menu break the mobile version, so you may want to take a look at them, or add some media queries to fix them up a bit.
171
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
