Unable to hide very long menu items due to Bootstrap Code
I'm trying to make the menu items dissapear before shifting into the second row, and making the 3 bar menu pop up as soon as the menu items dissapear as I resize the browser. http://jsfiddle.net/qwwru7eh/
So far I have tried to style them with media queries using display none and display:block with inline css style tags:
I isolated the issues with Bootstrap to the following code, however I cant get the desired effect from styling it:
@media (min-width: 872px) { .navbar-toggle { display: none; } }
@media (max-width: 871px) { .navbar-nav .open .dropdown-menu { position: static; float: none; display:none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } }
HTML:
<nav class="container-fluid navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<!--Logo!-->
<div class="navbar-header">
<a href="#" class="navbar-brand">THE LOGO</a>
<!--Toggle Button 3 Lines -->
<button type="button" class="navbar-toggle customtogglebtn" data-toggle="collapse" data-target="#mainNavBar">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!--Navigation Menu Items!-->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Timeline</a></li>
<li><a href="#">Contact</a></li>
<!--Dropdown Menu Item with Options!-->
<li class="dropdown">
<a href="dropdown" class="dropdown-toggle" data-toggle="dropdown">My Profile<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Friends</a></li>
<li><a href="#">Settings</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Notifications</a></li>
<li><a href="#">My Timeline</a></li>
<li><a href="#">Log Out</a></li>
</ul>
</li>
</ul>
<!--Right-Align Menu Items!-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Logout</a></li>
</ul>
</div>
</div>
</nav>
<!--Page Content -->
<div class="container-fluid belowstatic" style="height:1000px; background:#333; bottom:0;">
Static Navigationbar
CSS:
body { padding-top: 51px;}
.navbar-toggle { outline:none; border:none; margin-right:-5px; background:none;}
.navbar-static-top {
top: 0;
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
}
If anyone knows the best way to style the bootstrap menu items elements, please let me know how to do it, and advise me on the best practice for styling bootstrap elements. Thank You!
You have a couple options, the first one would be to decrease the padding around the menu items which you could do with this media query:
@media (min-width: 768px) {
.navbar-nav>li>a {
padding:15px 10px;
}
}
JSFiddle example
Another option, if you don't want to change the padding, would be to decrease the font size:
body {
padding-top: 51px;
font-size:13px;
}
JSFiddle example
链接地址: http://www.djcxy.com/p/83680.html上一篇: 折叠展开我的导航栏菜单，但不会折叠它