I am looking on how to position my top navigation on the top right.
So far I have this code:
<div id="navbar" class="navbar navbar-fixed-top ">
<ul class="nav navbar-nav">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
But I am not sure how to position it on the top right.
Thanks.
The right way to do this according to bootstrap is using the class navbar-right. Have a look at this link on bootply.
Try the following:
<div id="navbar" class="navbar navbar-fixed-top">
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
<li>NL</li>
<li>ENG</li>
</ul>
</div>
Update. Made a mistake and placed navbar-right on the div instead of the ul. It's fixed now. Also included bootply link.
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
Log in button on the right side of navbar
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
<li>Logg inn</li>
</ul>
</nav>
Just add the link in another ul below and use the pull-right class
<nav class="navbar navbar-inverse">
Klokkebutikk
<ul class="nav navbar-nav">
<li>Herre</li>
<li>Dame</li>
<li>Barn</li>
</ul>
//add here
<ul class="pull-right nav navbar-nav">
<li>Logg inn</li>
</ul>
</nav>
Example here - http://www.bootply.com/NJ0UqYdKsh
I created a navbar with Twitter-Bootstrap but I'm having trouble with my navigation.
I want to create navigation where nav is on the left and my logo on the right. I created the .nav-head-middle div with vertical-align:middle; and display:inline-block; so that my navigation and logo are on the same line (i.e. the middle).
My navigation and logo are on the same line but my problem is that my logo isn't on the right.
HTML
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="nav-head-middle">
<ul class="nav navbar-nav nav-adelva">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
</div>
<div class="nav-head-middle">
<div class="navbar-right">
<img src="image/logo.png" />
</div>
</div>
</div> <!--/container -->
</div> <!--/navbar -->
CSS
.nav-head-middle{
display:inline-block;
vertical-align:middle;
}
Your problem could reside in not specifying the first set of navigation tabs to float left.
In CSS you need to tell the parts on the left to "go left" and the parts on the right to "go right".
In your case, with using bootstrap, you should utilize the built in code as apposed to creating extra custom CSS. The build in classes that should help are "navbar-left" and "navbar-right".
Not sure if this HTML will work for you or if it will help clarify your troubles, but I would think the html code should look closer to this:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<ul class="nav nav-navtabs navbar-left">
<li>HOME</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>PARTNERS</li>
<li>CLIENTS</li>
<li>NEWS</li>
<li>CAREER</li>
<li>CONTACT</li>
</ul>
<ul class="nav nav-tabs navbar-right">
<li><img src="image/logo.png" /></li>
</ul>
</div> <!--/container -->
</div> <!--/navbar -->