Here is the navbar html
<div class="row">
<div class="col-xs-12">
<nav class="navbar" id="nav_menu">
<ul class="nav navbar-nav">
<li class="item">Home</li>
<li class="dropdown item open">
About us
<ul class="dropdown-menu">
<li>People</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
And the problem is the size is restrict to the navbar height, that means the dropdown box can not go beyond the nav bar size. I suspect it is not caused by z-index after checking. It is something related to the overflow, but any element tag need to change?
Thanks for helping
The test link:
http://kotechweb.com/kmk/
<div class="row" style="overflow:visible;"></div>
get rid of
.left_menu_body {
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.row {
overflow: hidden;
}
really don't understand why you did that crazy "hack" on .left_menu_body
Related
I'd like to have two side menus in a dropdown in the navbar. In order to accomplish that I'd like to use flexbox. However the words are wrapping and i would like them not to and instead grow to fit the width of the content.
Tip: You'll need to expand the fiddle's rendering width to avoid the bootstrap collapse.
fiddle
<nav class="navbar navbar-default">
<div class="container-fluid">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<div class="flex-container">
<div>
<li>Left Side</li>
<li>Longer content on the left side</li>
</div>
<div>
<li>Log In</li>
<li>Sign Up</li>
</div>
</div>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
.flex-container {
display: flex;
justify-content: space-between;
}
I found the answer here. I was looking to avoid setting a fixed min-width
.dropdown-menu > li > a {
white-space: nowrap;
}
You need to override the bootstrap's default style on .dropdown-menu with something like,
.dropdown-menu {
min-width: 300px;
}
Hope this helps.
FYI.. you can accomplish this by applying the "text-nowrap" class available in Bootstrap 5 to the ul or div elements.
<ul class="dropdown-menu">
<div class="flex-container text-nowrap">
<div>
I have this header in my Bootstrap template:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
//Some unrelated stuff
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
//Some unrelated stuff
</ul>
<ul class="nav navbar-nav pull-right-custom">
<li class="dropdown">
DDButtonText <strong class="caret"></strong>
<ul class="dropdown-menu">
Test
</ul>
</li>
</ul>
</div>
</div>
</nav>
What I'm trying to accomplish is to make the dropdown menu the same width as the 'DDButtonText' thing. I tried setting min-width to dropdown-menu but it was different for each browser. It was alright in my Firefox but Chrome and other browsers showed a little different sizes.
How do I make my menu be the same size as the button regardless of browser, always?
You can try adding this:
CSS:
.nav .dropdown-menu{
width: 100%;
min-width: inherit;
}
Bootply: http://www.bootply.com/MfkTjxasD7
I'm trying to create a navbar using bootstrap, but I can't seem to get rid of the small space beneath each tab. Can anyone help?
Code:
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">Baseline Assessment</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">Step 1: Verification</li>
<li>Step 2: Par-Q</li>
<li>Step 3: Exercise History</li>
<li>Step 4: Decision</li>
</ul>
</div>
</nav>
Thanks.
Apply Padding Adjustments
Try making the padding large enough to match your navbar-brand element which is explicitly making the menu larger due to it's height of 50px :
.nav>li>a {
position: relative;
display: block;
/* Adjusting this from 10px 15px to 15px should push the rows down */
padding: 15px;
}
You can see an example of what this change looks like below :
Consider Responsive Utility Classes
You might also consider performing some type of truncation of the content of your menu items as well, as smaller resolutions will result in a "wrapping" effect. Bootstrap's available responsive utility classes can help mitigate this issue :
<ul class="nav nav-pills nav-justified" role="tablist">
<li class="active">
<a href="#verifyPanel" aria-controls="verifyPanel" role="tab" data-toggle="tab">
<span class='hidden-sm'>Step 1: Verification</span>
<span class='visible-sm'>Verification</span>
</a>
</li>
<!-- Do this for each <li> element -->
</ul>
You can see this in action here and demonstrated below :
I'm trying to pin a navigation link in the upper right. This works great in Chrome and Safari, but not in Firefox (Update: also not in IE). I don't know if I'm doing something wrong or if it is a bug in FF.
Here's a bootply and the code:
HTML:
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Link 1</li>
<li>Link 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li data-spy="affix" data-offset-top="40">Link fixed</li>
</ul>
</div>
</div>
</nav>
CSS:
body {height:1500px;}
.navbar-default .navbar-right>li>a {background:#333; color:#fff;}
.navbar-right .affix {position:fixed;}
Any ideas on this?
Thank you.
The reason is initially the link is static which is 16px(15px padding-right of .container-fluid + 1px border-right of .navbar) away from the right of the container. When the user scrolls downs and the link becomes fixed, the fixed position is set with respect to the page. You can try setting the below style and see it helps you, but i don't understand why Chrome and FF is behaving different.
.navbar-right .affix {
position:fixed;
right:16px;
}
I have a menu and a submenu in different divs. There is a space between them. How can I make them look like a one whole menu? I used bootstrap navbar for main menu and simple nav for submenu. I'm very newbie in css. this is what I have:
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="#">Website Logo</a>
<ul class="nav">
<li class="active">DashBoard</li>
<li>Docs</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Account<b class="caret"></b></a>
<ul class="dropdown-menu" style="width: 250px;">
<li>Dashboard</li>
<li>LogOut</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<ul class="nav nav-pills">
<li class="active">
Stats
</li>
<li>Api Calls</li>
<li>Settings</li>
</ul>
</div>
jsfiddle
I just want to remove the space between them.
And one more little question:
how can I get rid of a little caret between button and it's dropdown? (white triangle between Account nav item and it's dropdown)
Your first question can be answered by removing the default margin-bottom for the class navbar:
.navbar {
margin-bottom:0
}
Now, for your second question. There is a triangle created using borders on your dropdown-menu. You can disable this with this css:
.navbar .nav > li > .dropdown-menu:after {
border:none;
}
Add the following CSS to remove the margins:
.navbar{
margin:0px;
}
JS Fiddle: http://jsfiddle.net/eszf7/3/