Bootstrap 3 collapsing navbar does not remain visible when expanded, but is visible on hover
Question
self-taught novice here using Bootstrap 3 latest. I have an issue that's puzzling me. Thank you in advance for your time.
As the title suggests, the navbar collapses perfectly on mobile/smaller screen sizes, the button looks as intended, and i'm able to expand it. But immediately upon clicking, the dropdown menu appears suddenly and then disappears. When I hover my mouse over the area they flashed in, the navmenu links (and their dropdowns) are visible and clickable. The issue persists in multiple browsers.
I've tried a number of the navbar collapse solutions suggested on SO in similar topics, but to no avail (eg updating jQuery/bootstrap .js files, double checking the data-target attribute, double checking the linked java scripts, etc.).
Not sure where I goofed here. I appreciate any feedback as I'm trying to learn. Thanks in advance!
/*NavBar Gray on Blue*/ .navbar { margin-bottom: 0; } .navbar-inverse { background: #004a99; border: 0; } .dropdown-menu { background: #004a99; border-radius: 0; border: 0; } .navbar-inverse .navbar-brand { color: #f2f2f2; } .navbar-inverse .navbar-brand:hover { color: #004a99; } .navbar-inverse .navbar-nav li a { color: #f2f2f2; font-size: 16px; } .navbar-inverse .navbar-nav li a:hover { background: #004a99; } .navbar-inverse .navbar-nav .dropdown-menu li a:hover { background: #f2f2f2; color: #004a99; } .navbar .nav>li.dropdown.open.active>a:hover, .navbar .nav>li.dropdown.open>a { color: #004a99; background-color: #f2f2f2; border-color: #fff; } .dropdown-menu li a { padding: 10px; } .navbar-brand { padding: 0px; } .navbar-brand>img { height: 100%; padding: 0px; width: auto; } .navbar-nav.navbar-center { position: absolute; left: 50%; transform: translatex(-50%); }
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <!--Java and Links--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway:400,500,600,800" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="/img/favicon.ico" /> <body> <!--NavBar--> <nav class="navbar navbar-inverse navbar-static-top sans-serif"> <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" 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> <!--NavBar Logo<a class="navbar-brand" href="#"><img src="/img/navlogo.png" alt="Logo"></a>//--> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-center"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">text.<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">text</a></li> <!--<li><a href="#">text</a></li>//--> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">text<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">text</a></li> <li><a href="#">text</a></li> </ul> </li> <li><a href="#">text</a></li> </ul> </div> </div> </nav> </body>
2 answers
solution1
0 ACCPTED 2017-03-06 17:10:39
The problem is the .navbar-center transform. You can fix it by only applying the centering on larger widths:
@media (min-width: 768px) {
.navbar-nav.navbar-center{
position: absolute;
left: 50%;
transform: translatex(-50%);
}
}
solution2
0 2017-03-06 17:13:52
When things go wrong try to go back to simpler and then work from there!
Here is your working blue navbar:
.container-fluid .navbar-header, #bs-example-navbar-collapse-1, .navbar-in verse button.navbar-toggle, .navbar-inverse button.navbar-toggle:focus, .navbar-inverse button.navbar-toggle:hover{ background-color: #004a99; }
<head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <!--Java and Links--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway:400,500,600,800" rel="stylesheet" type="text/css"> <link rel="shortcut icon" href="/img/favicon.ico" /> <body> <!--NavBar--> <nav class="navbar navbar-inverse navbar-static-top sans-serif"> <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" 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> <!--NavBar Logo<a class="navbar-brand" href="#"><img src="/img/navlogo.png" alt="Logo"></a>//--> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-center"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">text.<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">text</a></li> <!--<li><a href="#">text</a></li>//--> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">text<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">text</a></li> <li><a href="#">text</a></li> </ul> </li> <li><a href="#">text</a></li> </ul> </div> </div> </nav> </body>
If you are wondering why i need to specify button before navbar-toglle it is to make my selector more specific than the one provided by boostrap.Always remember that boostrap can have pretty precise selectors so inspect the element find the style that is already applied by boostrap then take the same selector and find a way to specify it like i did here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Disable bootstrap collapse hide function when content is visible/expanded
Bootstrap navbar disappears when in a div where it should be always visible
jQuery hover - How to make div appear on hover, then remain visible
Transparent navbar to visible when scrolling
bootstrap navbar toggle button is not visible in mobile
Bootstrap Navbar color glitch when collapsing
Bootstrap 3: Catch event when navbar is collapsed or expanded
Collapsing multiple navbar bootstrap
Bootstrap Navbar not Collapsing properly
Bootstrap 3 navbar not fully collapsing
Related Tags