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;
}
Related
I'm new to Bootstrap 3 and I'm still learning. Till now I managed to make an simple navbar with logos and links. I'm now trying to have my logo above and my navigationbar below the logo. I've used HTML breaks, but that only is spacing my bar downwords.
The code:
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Super Signals</a>
</div>
<br>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
This is what I have now:
This is what I want:
Add float: initial; to the navbar-header class
You can accomplish this by using float: none or float: initial which will remove the left float that is currently in effect.
from what I can see here. It's a problem of telling the browser where you want to position.
1. Use CSS
https://www.w3schools.com/css/css_positioning.asp
2. Using quick positioning classes
position-static,
position-relative,
position-absolute,
position-fixed,
position-sticky,
3. Float
float: none, float: initial
Hope this answer helps.
Use this code and style your h1 tag as your requirement
<div class="container"><h1>Super Signals</h1></div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Targets</li>
<li>Contact</li>
</ul>
</div>
</nav>
Any problem or question just ask in comment below my answer
Can somebody explain what is going on here?
I'm using bootstrap 3.3.7.
Why are .container elements invisible?
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Big Brother</a>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Messages</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>something</li>
</ul>
</div>
</div>
<div class="container">
<h2>Invisible</h2>
</div>
Your <h2> is not invisible, it's hiding behind your navbar.
You're using a navbar that uses fixed positioning. This takes it out of the normal document flow where it doesn't take up space so the elements after it begin to flow as if it wasn't there.
If you add padding-top: 50px; to <body> you will see your <h2>.
If you read through the Bootstrap Navbar Docs you'll notice a callout that says Body padding required.
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
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
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 :