Bootstrap Navbar troubleshooting: unexpected drop down menu behavior -
i'm having few issues here, main issue mobile responsiveness drop down menus. can't figure out i'm doing wrong.
here html:
<div class="navbar navbar-inverse"> <div class="container"> <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> </div><!--nav-header--> <div class="collapse navbar-collapse"> <ul class="nav nav-pills"> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" data-target="#">practice <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">a</a></li> <li><a href="#">b</a></li> <li><a href="#">c</a></li> <li><a href="#">d</a></li> <li><a href="#">e</a></li> </ul> </li> <li><a href="blog.html">blog</a></li> <li><a href="contact.html">contact</a></li> </ul> </div><!--collapse--> </div><!--container--> </div><!--navbar--> and here css:
.navbar { background: black; position: absolute; margin-top: 50px; width: 100%; border-top: 2px solid black; border-bottom: 3px solid #4f3838;} .navbar .nav-pills li { font-size: 1.2em !important;} .navbar .nav-pills { color: white; margin: 0 3px 0 3px;} .navbar .nav-pills a:hover { color: black;} .dropdown .dropdown-menu { background: black;} i'm having 2 problems on mobile: first, after click , unclick menu button stays selected (it appears grey instead of black after it's been clicked), , main drop down menu displays horizontally, , drop down within drop down displays vertically creating hot mess. don't know i've done cause or how fix it. when @ tutorials example navbars same mine , drop downs behave expected.
my last issue when select drop down "practice" have text set turn black on mouse over, because it's nav-pill background white when it's selected/open. if have menu open , move mouse away text white , background white. there css solution this?
you can see code in action here: http://www.bootply.com/5q1qgfp2c3
if go mobile view , scrunch window down can see mean drop down.
you're seeing odd behavior because you're using nav-pills instead of default navbar elements. see working example ways customize everything.
/***navbar background color, border removed ,border radius sqaure***/ .navbar.navbar-custom { background: black; margin-top: 50px; border: none; border-top: 2px solid black; border-bottom: 3px solid #4f3838; border-radius: 0; } /***link color***/ .navbar.navbar-custom .navbar-nav > li > { color: white; margin: 0 3px 0 3px; font-size: 1.2em; } /***link color hover statr***/ .navbar.navbar-custom .navbar-nav > li > a:hover { color: black; } /***link color hover statr***/ .navbar.navbar-custom .navbar-nav > li:hover, .navbar.navbar-custom .navbar-nav > li:focus { background: white; } /***link background , color active state***/ .navbar.navbar-custom .navbar-nav > .active, .navbar.navbar-custom .navbar-nav > .active > a, .navbar.navbar-custom .navbar-nav > .active > a:hover, .navbar.navbar-custom .navbar-nav > .active > a:focus { background: white; color: black; } /***navbar brand link color***/ .navbar.navbar-custom .navbar-brand { color: white; } /***dropdown-menu background color***/ .navbar.navbar-custom .dropdown-menu { background: black; border: none; } /***dropdown-menu color***/ .navbar.navbar-custom .dropdown-menu > li > { color: white; font-size: 1.2em; } /***dropdown-menu color hover , focus state***/ .navbar.navbar-custom .dropdown-menu > li > a:hover, .navbar.navbar-custom .dropdown-menu > li > a:focus { color: black; background: white; } /***dropdown background active state***/ .navbar.navbar-custom .nav li.dropdown.open > .dropdown-toggle, .navbar.navbar-custom .nav li.dropdown.active > .dropdown-toggle, .navbar.navbar-custom .nav li.dropdown.open.active > .dropdown-toggle { background: white; color: black; } /***toggle button***/ .navbar.navbar-custom .navbar-header .navbar-toggle { border: none; } /***toggle button hover , focus state***/ .navbar.navbar-custom .navbar-header .navbar-toggle:hover, .navbar.navbar-custom .navbar-header .navbar-toggle:focus { background: white; border: none; } /***collapse borders***/ .navbar.navbar-custom .navbar-collapse { border: none; } @media (max-width: 767px) { .navbar.navbar-custom li.dropdown .dropdown-menu > li > { color: white; background: black; } /***dropdown-menu color hover , focus state***/ .navbar.navbar-custom li.dropdown .dropdown-menu > li > a:hover, .navbar.navbar-custom li.dropdown .dropdown-menu > li > a:focus { color: black; background: white; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default navbar-custom"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <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="#">brand</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">home</a> </li> <li><a href="about.html">about</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">a</a> </li> <li><a href="#">b</a> </li> <li><a href="#">c</a> </li> <li><a href="#">d</a> </li> <li><a href="#">e</a> </li> </ul> </li> <li><a href="blog.html">blog</a> </li> <li><a href="contact.html">contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
Comments
Post a Comment