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
Related
I have a navbar in asp.net mvc web application and when I hover on it I Want background to occupy all space but at some of the list Items it does not occupy spaces at the bottom as You can see in the image
li elements of services, signup and login occupying all spaces at the bottom but Home and aboutUs are not. i tried margin:0; at li element but nothing happens.
.navbar {
font-size: 1.25em !important;
box-shadow: 0px 0px 3px 0.5px black;
border : none;
}
.navbar-inverse {
background-color: #00ff99 !important;
}
.navbar-toggle {
background-color: #00804d;
}
.navbar-inverse .navbar-brand {
color: #000099 !important;
font-family: 'Brush Script MT' !important;
font-size: 1.50em !important;
font-weight: 400 !important;
text-shadow: 5px 5px 5px black !important;
}
.navbar-nav li{
margin:0;
}
.navbar-inverse .navbar-nav > li > a {
color: black;
}
.navbar-inverse .navbar-nav > li > a:hover, .Dropdown-btn:hover, .Dropdown-btn:focus {
/*background-color: #8080ff;*/
background-color: rgba(128, 128, 255,0.5) !important;
color: white important;
}
.glyph-pad {
left: -4px;
top: 4px;}
.Dropdown-btn {
cursor: pointer;
font-size: inherit;
border: none;
outline: none;
color: black;
font-family: inherit;
background-color: inherit;
padding: 13px 13px;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #00ff99;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu > li > a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
ul.dropdown-menu > li > a {
color: black !important;
}
ul.dropdown-menu > li > a:hover {
background-color: rgba(128, 128, 255,0.5) !important;
color: white !important;
}
.dropdown-menu > li > a:hover {
/*background-color: #8080ff;*/
background-color: rgba(0, 255, 153,0.8);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<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>
E-HealthCare
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
<div class="dropdown">
<button class="Dropdown-btn btn-block text-left dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false">
Services
<span class="caret"></span>
</button>
</div>
</li>
<li>About Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<Span class="glyphicon glyphicon-user"></Span> Sign Up
</li><li>
<Span class="glyphicon glyphicon-log-in"></Span> Login
</li>
</ul>
</div>
</div>
</div>
This is working codepen link
The dropdown links for the notification icon activates and flashes the background-color of the bell icon, is there a way to stop this happening?
This behaviour also occurs when the dropdown is open and you click the searchbox field it activates the background color of the bell icon as well, need to stop this some how?
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.search .input-group {
padding-top: 15px;
font-family: 'Lato', sans-serif;
}
.search .input-group input.search-field {
padding: 0 10px 0 0;
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #fff;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
.dropdown-toggle.inbox {
padding-top: 15px;
margin-bottom: 5px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell li a:link {
padding-top: 5px;
padding-bottom: 5px;
white-space: normal !important;
width: 350px;
}
.nav>li.dropdown.bell li a:hover {
color: #ff5500;
background-color: transparent;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
color: #ff5500;
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #aaa;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
span.notify-link {
display: block;
padding: 0 5px 0 5px;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 9%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 9%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
#media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
#media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
#media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.search {
padding-left: 10px;
padding-right: 10px;
margin-top: 0;
width: 100%;
overflow: hidden;
}
.search .input-group {
padding-top: 0;
}
.dropdown-menu.bell li a {
text-align: left;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
.bell,
.user {
text-align: center;
}
}
/* Landscape phones and down */
#media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
team<span>or</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-default">4:00 AM</span><span class="notify-link">Favourites Snippet</span>
</li>
<li class="divider"></li>
<li><span class="label label-warning">4:30 AM</span><span class="notify-link">Email marketing</span>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span><span class="notify-link">
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
Subscriber focused email design
</span></a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
I think what you need is to target the :focus of the .dropdown-toggle and set the background-color to something like #fff or transparent. Like this:
.bell .dropdown-toggle:focus { background-color: transparent; }
Bootstrap uses a lot of "opinionated" styles like rounded corners, outlines, and focus styles that can be a pain.
add the following lines to your css in order to have only white navbar
.navbar-default {
background-color: #fff;
border-color: #fff;
}
I have a Bootstrap 3 navbar. Everything works fine on mobile but at desktop size the "mobile" collapse version of the navbar flickers down when a nav link is clicked. I just don't want to be able to see this on the desktop.
You can view a bootply here.
I am fairly new to web development so I apologize if my code is unorganized or sloppy. The code is...
/* CSS used here will be applied after bootstrap.css */
.navbar {
height: 110px;
background-color: #f7f7f7;
width: 100%;
border-color: #f7f7f7;
}
.navbar-logo {
margin-top: 10px;
margin-left: 45px;
}
.navbar-social {
margin-top: 10px;
}
.navbar-social i {
float: left;
background: #ffffff;
color: #707070;
width: 30px;
height: 30px;
border: 1px solid #909090;
border-radius: 20px;
text-align: center;
margin-right: 10px;
padding-top: 10px;
}
.navbar-social > p {
float: right;
text-align: right;
color:#FF344E;
}
.navbar .nav-pills>.active>a:hover,.navbar .nav-pills>li>a:hover, .navbar .nav-pills>li>a:focus {
background-color: #f60756;
}
.navbar .nav-pills>.active>a,.navbar .nav-pills>.open>a,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover, .navbar .nav-pills>.open>a:focus {
background-color: #f60756;
}
.dropdown-menu {
background-color: #f7f7f7;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #f60756;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-image: none;
}
.navbar .navbar-brand {
color: #000000;
}
.navbar .navbar-brand:hover {
color: #FFFFFF;
}
/* fills in background on hamburger menu */
.navbar-collapse > ul {
background-color: #f7f7f7;
}
/* hamburger menu list */
.navbar .nav-pills>li {
margin: 10px;
font-size: 18px;
background-color: #f7f7f7;
}
/* hamburger menu list item */
.navbar .nav-pills>li>a {
color: #000000;
background-color: #f7f7f7;
}
.navbar .nav-pills .open .dropdown-menu>li>a, .navbar .nav-pills .open .dropdown-menu {
background-color: #f7f7f7;
color:#ffffff;
}
.navbar .nav-pills>li>a:hover, .navbar .nav-pills>li>a:focus {
color: #ffffff;
background-color: #f60756;
}
.navbar .nav-pills>.active>a,.navbar .nav-pills>.open>a, .navbar .nav-pills>.open>a:hover, .navbar .nav-pills>.open>a:focus {
color: #ffffff;
background-color: #f60756;
}
.navbar .nav-pills>.active>a:hover, .navbar .nav-pills>.active>a:focus {
color: #707070;
background-color: #f60756;
}
.navbar .dropdown-menu {
background-color: #f7f7f7;
color: #ffffff;
}
.dropdown-menu>li>a {
color: #333333;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
color: #FFFFFF;
}
.navbar .nav-pills>.dropdown>a .caret {
border-top-color: #999999;
}
.navbar .nav-pills>.dropdown>a:hover .caret {
border-top-color: #999999;
}
.navbar .nav-pills>.dropdown>a .caret {
border-bottom-color: #999999;
}
.navbar .nav-pills>.dropdown>a:hover .caret {
border-bottom-color: #999999;
}
/* hamburger menu colors */
.navbar .navbar-toggle {
border-color: #f60756; /* Change border color around this buttons */
background: #f60756; /* Change background for button itself */
}
.navbar .navbar-toggle .icon-bar {
background: #ffffff; /* Change color for horizontal lines */
}
.navbar-collapse.in {
overflow-y: none;
}
<div class="navbar navbar-fixed-top" role="banner">
<a href="./" class="col-xs-2 col-sm-2 col-md-2 navbar-logo">
<img alt="Brand" src="img/" height="100" width="100">
</a>
<div class="col-xs-6 col-xs-offset-1 col-sm-6 col-md-6 col-md-offset-0 col-lg-6 navbar-social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus fa-lg"></i>
<!--TODO check vimeo for removal
<i class="fa fa-vimeo"></i> -->
<p>555.555.5555</p>
</div>
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="col-xs-6 col-xs-offset-8 col-sm-12 col-md-9 col-md-offset-1 nav navbar-nav nav-pills">
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#whyRadicalNav">Why Radical?</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#whyGiraffeNav">Why Giraffe?</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#towerNav">Tower</a>
</li>
<li>
Stories
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#contactNav">Contact</a>
</li>
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#">Blog</a>
</li>
</ul>
</nav>
</div>
That is because you are targeting navbar-collapse every time a link is clicked. Exactly why the navbar is behaving funny:
Bootply Link
instead of this:
<li>
<a data-toggle="collapse" data-target=".navbar-collapse" href="#contactNav">Contact</a>
</li>
go for this (do this for all the links):
<li>
Contact
</li>
<li>
Why Radical?
</li>
<li>
Why Giraffe?
</li>
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>
Disclaimer: Pardon my stupidity when it comes to coding. I started learning last week.
I have been tinkering around with a Bootstrap 3 template from a Youtube tutorial I found to assist me in learning HTML, CSS, and eventually Java. In this example I'm working on, I am trying to get the inline unordered list to float to the right of the page. I tried adding float:right to most of the navbar elements in the CSS, but it's not doing anything for me. Any help would be greatly appreciated.
HTML:
<div class="navbar navbar-fixed-top">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/logo.png" alt="Your Logo"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="inactive">
Photos
</li>
<li class="inactive">
Videos
</li>
<li class="inactive">
Contact Us
</li>
</ul>
</div><!-- end nav-collapse -->
</div><!-- end container -->
</div><!-- end navbar -->
CSS:
.navbar {
position: relative;
min-height: 50px;
padding-right: 15px;
padding-left: 15px;
margin-bottom: 20px;
background-color: #eeeeee;
border-radius: 4px;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar:before,
.navbar:after {
display: table;
content: " ";
}
.navbar:after {
clear: both;
}
.navbar-nav {
margin-top: 10px;
margin-bottom: 15px;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
color: #777777;
border-radius: 4px;
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus {
color: #333333;
background-color: transparent;
}
.navbar-nav > .active > a,
.navbar-nav > .active > a:hover,
.navbar-nav > .active > a:focus {
color: #555555;
background-color: #d5d5d5;
}
.navbar-nav > .disabled > a,
.navbar-nav > .disabled > a:hover,
.navbar-nav > .disabled > a:focus {
color: #cccccc;
background-color: transparent;
}
.navbar-nav.pull-right {
width: 100%;
}
.navbar-static-top {
border-radius: 0;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
border-radius: 0;
}
.navbar-fixed-top {
top: 0;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
}
.navbar-brand {
display: block;
max-width: 200px;
padding: 15px 15px;
margin-right: auto;
margin-left: auto;
font-size: 18px;
font-weight: 500;
line-height: 20px;
color: #777777;
text-align: center;
}
.navbar-brand:hover,
.navbar-brand:focus {
color: #5e5e5e;
text-decoration: none;
background-color: transparent;
}
.navbar-toggle {
position: absolute;
top: 9px;
right: 10px;
width: 48px;
height: 32px;
padding: 8px 12px;
background-color: transparent;
border: 1px solid #dddddd;
border-radius: 4px;
}
.navbar-toggle:hover,
.navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: #cccccc;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
As you are using Bootstrap, to so you may use class .pull-right to align it to right.
For more info click here.
In Bootstrap v 3.** it is better practice to use "navbar-right" so the proper context should read:
ul class = "nav navbar-nav navbar-right"
If you are using bootstrap 3 the use navbar-right to pull right h
jsfiddle.net/makk/9yxeg7r5/2 - this is a similar example
<div id="top"></div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="navbar-header">
<a class="navbar-brand" href="#top"><span class="fa fa-book fa-3x">MATH</span></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Features</li>
<li>Courses</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>