This is my first question so please excuse me if it is ridiculous/rather vague.
I have been trying for days to get a navigation that starts at the bottom and then when scrolled it sticks to the to, something that is similar to this website.
All I've managed to do so far is this:
<div id="nav" data-spy="affix" data-offset-top="443" data-offset-bottom="200">
<nav class="navbar navbar-affix-top navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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="brand1" href="#why"><img src="http://dummyimage.com/228x63"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<ul class="nav navbar-nav">
<li>Why why why ?</li>
<li>How How How</li>
<li>Action call</li>
<li>Who who who</li>
</ul>
</div>
</nav>
</div>
And the CSS is:
.navbar-nav {
font-size: 1.4em;
font-family: "adelle";
color: #fff;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:11; }
.navbar-nav > li > a {
color: #fff;
text-align:center;
}
.navbar-nav > li > a:hover{
color: #59aa80;
background-color: transparent;
transition: 1s;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition:1s;
}
.navbar-nav li.active:after {
content: " .";
display: block;
text-indent: -99em;
color: #fff;
height: 0px;
margin-left: -.8em;
margin-right: auto;
margin-top: 3px;
position: absolute;
left: 50%;
width: 1px;
text-align:center;}
.navbar .nav .active > a {
background-color: none;
background: 0 !important;
color: #FFF !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
text-align:center;}
.navbar {
background-color: rgba(0,0,0,.7);
box-shadow: 1px 5px 10px rgba(0,0,0,.3);
text-align:center;}
.navbar-header {
padding-left: 40px; }
I have searched stackoverflow.com as well as JSFiddle, Bootply, Bootsnip etc without any luck so it would be much appreciated if I could get some help.
You can use the Bootstrap affix component to position it to the top once scrolling reaches a specific point.
Here's a working example..
http://www.bootply.com/121595
Related
Is there a way to dynamically resize the nav-bar brand logo image to go over the nav-bar itself without it losing it's size?
I want it to be fixed on the top of the nav-bar and be over it. I don't want the nav-bar to adjust to the image.
.navbar {
margin-bottom: 0;
border-radius: 0;
border: 0;
background-color: #97CACA;
color: #fff;
padding: 1% 0;
font-size: 1.2em;
}
.navbar-brand>img {
max-height: 100%;
height: 100%;
width: auto;
margin: 0px;
}
.navbar-brand {
float: left;
min-height: 100px;
padding: 0 0px;
}
.navbar-inverse .navbar-nav .active a,
.navbar-inverse .navbar-nav .active a:focus,
.navbar-inverse .navbar-nav .active a:hover {
color: #fff;
background-color: #97CACA;
}
.navbar-inverse .navbar-nav li a {
color: #E2F2E8;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="MyNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> <img src="https://preview.ibb.co/cuc7sb/logo_sitters.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>A Nossa Missão</li>
<li>Os Nossos Serviços</li>
<li>Contactos</li>
</ul>
</div>
</div>
</nav>
You can give a position: absolute to your .navbar-brand and remove float: left
Added top: 0 and left: 0 to put it in place. You can change them accordingly.
.navbar-brand {
min-height: 100px;
padding: 0 0px;
position: absolute;
top: 0;
left: 0;
}
Additionally, you need to style your ul after that, because it will be behind your logo
(this is a rough solution)
.navbar-inverse .navbar-collapse ul {
float: right;
}
Example: https://jsfiddle.net/d67y3Ltn/1/
i'm trying to change the width of my navbar which is fixed and also has a navbar-collapse property that i want to keep when screen size changes.
I also added in the Bootstrap i am using for this page, so at the moment with the code below, the navbar is fixed but is full width, it collapses when you change to mobile site, so the only thing i want is to change the width from full width so that there is atleast 30% open space on either side of the navbar so it will be centred to the page.
and also adding a logo/image to the navbar only when its collapsed
Hope you can help me!
<html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
.navbar-nav.nav-justified > li{float:none; }
.navbar{
background-color:white;
font-family: Amatic SC;
border:none;
font-size: 25px;
letter-spacing: 1px;
text-align:center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin,
color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
</style>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" "col-xs- col-xs-offset-0 col-md-6 col-md-offset-3" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="text-align:center" >
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details</li>
<li id="scrollDirections">Directions</li>
<li id="navRsvp">RSVP</li>
<li id="scrollBucket">Bucket List</li>
<li id="scrollAccommodation">Accommodation</li>
</ul>
</div>
</nav>
</body>
</html>
You have to modify the width and centrally align your code in the media queries for the expected behaviour in mobile view.
You have to add the following css:
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
}
Refer code:
.navbar-nav.nav-justified > li {
float: none;
}
.navbar {
background-color: white;
font-family: Amatic SC;
border: none;
font-size: 25px;
letter-spacing: 1px;
text-align: center;
}
.navbar:hover,
.navbar:active {
color: black;
transition: background-color 0.3s ease-oin, color 0.3s ease-out;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: black;
}
#media (max-width: 981px) {
.navbar {
width: 30%;
margin: auto;
}
.navbar-left,
.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-fixed-top {
top: 0%;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in {
display: block !important;
}
}
<nav class="navbar navbar-inverse navbar-fixed-top col-xs-offset-0 col-md-6 col-md-offset-3">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-collapse collapse" style="text-align:center">
<ul class="nav navbar-nav nav-justified">
<li id="scrollDetails">Details
</li>
<li id="scrollDirections">Directions
</li>
<li id="navRsvp">RSVP
</li>
<li id="scrollBucket">Bucket List
</li>
<li id="scrollAccommodation">Accommodation
</li>
</ul>
</div>
</nav>
I'm working on a profile website for myself and have a 'decent' concept up and running.
However it seems as if my navbar's data-spy either isn't firing off or if there is something wrong with my html / css.
This is a pen with the html / css.
This is the body (relevant data-spy reference):
<body data-spy="scroll" data-target="#navbar" data-offset="50">
This is how I've set up the navbar:
<nav id="navbar" class="collapse navbar-collapse">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navBar-target" class="navbar-toggle">
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
<span class="icon-bar"> </span>
</button>
</div>
<div class="collapse navbar-collapse" id="navBar-target">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#top" > About </a>
</li>
<li>
<a href="#portfolio" > Portfolio </a>
</li>
<li class>
<a href="#contact" > Contact </a>
</li>
</ul>
</div>
</nav>
And here is some of the relevant css:
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
color: #333;
background-color: black;
}
.navbar-nav>li>a {
color: #000000 !important;
}
#navbar {
margin: 12px 0;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-toggle {
position: relative;
float: right;
padding: 9vw 10vw
margin-top: 8vw;
margin-right: 15vw;
margin-bottom: 8vw;
background-color: transparent;
background-image: none;
border: 1vw solid transparent;
border-radius: 4vw;
}
.navbar-default .navbar-collapse {
border-color: #e7e7e7;
}
.nav>li {
height: 100%;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
.nav>li>a:focus,
.nav>li>a:hover {
text-decoration: none;
color: #722872;
background-color: #FFFFFF;
}
.nav>li a:hover {
color: #722872;
background: #FFFFFF;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
As mentioned, a full working example is on the code-pen
Seems Bootstrap doesn't include a default style for the active nav element. Need to create a style for .navbar-nav>.active>a
I want to create an active class for my header menu I try delete padding top and bottom for all element in my header and nothing works.
Here is my code:
<header>
<nav class="navbar navbar-default">
<div class="container-fluid header-custom">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.html"><img alt="Climatherm" src="img/home.png"></a>
</div>
<p class="navbar-text pull-right hidden-xs hidden-sm">09 99 99 99 99</p>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><span>Plomberie Sanitaires</span></li>
<li class="active"><span>Chauffage Climatisation</span></li>
<li class="active"><span>nouvelles énergies</span></li>
<li class="active"><span>dépannage maintenance</span></li>
<li class="active"><span>Partenaires</span></li>
<li class="active"><span>nous Contacter</span></li>
</ul>
</div>
</div>
</nav>
</header>
My css code
body{
font-family: 'Roboto', sans-serif;
max-width: 1200px;
margin-left:auto;
margin-right:auto;
}
.navbar-default {
background-color: #ed1c24;
border:none;
border-radius:0px;
}
.header-custom{
max-width:1000px;
padding-top:0px;
padding-bottom:0px;
}
.navbar-text{
font-size: 18px;
font-weight: 700;
color:#fff!important;
background-color:#d80109;
border-radius:18px;
padding:8px 20px 8px 30px;
margin-top:8px;
margin-bottom:auto;
}
.navbar-text::before{
content: url(../img/contact.png);
display:inline-block;
opacity: 1;
transform:translate(-13px, 4px);
}
.navbar-default .navbar-nav>li>span>a {
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
}
.navbar-nav{
padding: 0;
text-transform: uppercase;
}
.navbar-nav li {
display: inline-block;
list-style: none;
margin-left: 10px;
}
.navbar-nav li {
max-width: 110px;
line-height: 40px;
height: 40px;
background-color: #000;
}
.navbar-nav li span {
display: -moz-inline-box; /* FF2 or lower */
display: inline-block; /* FF3, Opera, Safari */
line-height: normal;
vertical-align: middle;
text-align: center;
}
.navbar-nav li span {
*display : inline; /* haslayout for IE6/7 */
}
and the result is:
results of my code
I want to make it like this:
Result expected
I tried to search for a solution in different forums and here but nothing works.
Is this solution feasible? fiddle example
I set the height of the buttons the same as the container (50px instead of 40px).
.navbar-nav li {
max-width: 110px;
line-height: 50px;
height: 50px;
background-color: #000;
}
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">Link</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link</li>
<li class="nav-link">Link</li>
</ul>
</div>
</div>
</nav>
<div class="container" style="background: red;height:100px; width: 100%;">
</div>
</body>
I have provided a jsfiddle:
JSFiddle
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">Link
</li>
<li class="nav-link">Link
</li>
<li class="nav-link">Link
</li>
<li class="dropdown">
Drop-Down Menu<i class="fa fa-angle-down flipped"></i>
<ul class="dropdown-menu" id="menu">
<li class="nav-link">
<i class="fa fa-microphone fa-2x"></i>Option
</li>
<li class="nav-link">
<i class="fa fa-newspaper-o fa-2x"></i>Option
</li>
</ul>
</li>
<li class="nav-link">Link
</li>
<li class="nav-link">Link
</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.
Use bootstrap accordion, it uses bootstrap css and you can use a single accordion item as a drop down to push content down, this is bootstrap code so you can just copy and depending on whether you want it closed or opened just use class="collapse" or class="show" respectively. use accordion as a dropdown wherever you want it in your navigation bar
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>