I dont't know why incrementing the width on my navbar the incrementation only occur on the right side of the bar, for example, this is my html of my bar:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
Free shipping over $50
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class ="lita" href="#about">Be part of THE CIRLCE</a>
</li>
<li>
JOIN
</li>
<li>
LOGIN
</li>
</ul>
</div>
Using this css:
#bs-example-navbar-collapse-1{
background-color: #fde6dc;
padding: 2px 40px;
width: 100%;
}
The result is this one:
http://postimg.org/image/m7qu1vz45/full/
But, if I move the width by 150%, this happen:
http://postimg.org/image/60px3u3m9/full/
Why is this happening? Why it doesn't adjust keeping the ratio, if I put a margin It kind of resolve the problem, but when I re-size the screen it doesn't work.
Anyone has an idea?
Please try this for navbar,
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for 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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
Free shipping over $50
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li>
<a class ="lita" href="#about">Be part of THE CIRLCE</a>
</li>
<li>
JOIN
</li>
<li>
LOGIN
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Related
When I shrink the window, I want the menu to stay on the same line as the logo in medium screen. Right now it's stacking like this Link to image. How do I fix it?
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">LOGO</a>
</div>
<ul class="nav navbar-nav hidden-xs">
<li>Guides</li>
<li>Courses</li>
<li>Tutorials</li>
<li>Top Authors</li>
</ul>
<ul class="nav navbar-nav navbar-right" >
<li>Login</li>
<li>Sign Up</li>
</ul>
<!--collapse navbar -->
Hard to say because there is no CSS posted, but you can generally use inline-block to position the elements on the same line. Roughly:
.navbar-header {
display:inline-block;
vertical-align:middle;
width:30%;
text-align:left;
}
.nav {
display:inline-block;
vertical-align:middle;
width:65%;
text-align:right;
}
It maybe due to some discrepancy in adhering to bootstrap standard navbar. Below is a snippet implementing your code, but I applied it to the template provided in the Bootstrap navbar documentation, please let me know if you face any issues.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for 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 the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav hidden-xs">
<li>Guides</li>
<li>Courses</li>
<li>Tutorials</li>
<li>Top Authors</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
</div>
</nav>
JSFiddle Demo
In Bootstrap 3 I'm trying to create a navbar which will have to ul, both of which will align to the right. But when I add navbar-right to both ul's, they both align to the right, but the second ul in the markup displays first? What do I need to do to get them to display in the proper sequence?
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Link to Codeply: https://www.codeply.com/go/LibLIdo8NW
Just write the ul for Register and Login first that will solve your issue.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Register</li>
<li>Login</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
Updated link to your demo
Update:
The class navbar-right has the property float: right!important; which pushes the first element to the right most of the screen.
Overriding this property would be another hack :)
This is the right process.
Check this link.
In order to have your desired result you just have to switch the ul's for these elements.
Take navbar-right class to container for both UL's.
<div class="navbar navbar-inverse navbar-fixed-top">
<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>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav ">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav ">
<li>Register</li>
<li>Login</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
I changed my Code. I moved the Facebook link into its own <ul> bracket and then did a .navbar-right class for that <ul> element. This moved the facebook link to the right side just as I wanted. I deleted my CSS code that I had before. Now I am trying to get the Links to center on the screen with the brand on the left. How do I center the links?
<body>
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top ">
<div class="container-fluid" id="center-nav">
<!-- Brand and toggle get grouped for 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="#">Brnich Karate</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="navbar-right">
<li class="social"><i class="fa fa-facebook-square"></i>Find us on Facebook</li>
</ul>
</div>
</div>
</nav>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
You need to move your facebook link to a seperate <ul> list within your navbar and pull it right using navbar-right.
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="social">
<a href="#" class="btn btn-inverse btn-lg">
<i class="fa fa-facebook-square"></i>Find us on Facebook
</a>
</li>
</ul>
Then you need to set your navbar to center it's content as per this question: Center content in responsive bootstrap navbar
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
See Demo JSFiddle: https://jsfiddle.net/o8xyq519/1/
I'm trying to move my Login button to the right side of the Navbar.
Here's what I have right now. I managed to move the login button to the right side however, It is not aligned correctly along with the left side of the navbar menu tabs. Thank you so much for your help.
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#"><span class="fui-flat"></span></a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav">
<li class="active">Products</li>
<li>Features</li>
<li>Pricing</li>
<li>About</li>
</ul>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-right">
<li>Login</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</nav><!-- /navbar -->
Just add class navbar-nav. Working Bootply
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
Try with class pull-right.
<ul class="pull-right nav navbar-nav">
<li>Login</li>
</ul>
I have looked at other questions, but I just can't seem to fix the dropdown menu in my navbar.
I'm trying to make a dropdown menu like the one that is here, it's in the top right corner.
This is my code:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
<a class="navbar-brand" href="#">Loveland Tigers</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
Teams<b class="caret"></b>
<ul class="dropdown-menu">
<li>Freshman</li>
<li>Junior Varsity</li>
<li>Varsity</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The dropdown menu does not show up when I click on the little arrow.
Remove those unneccessary classes from navbar-collapse div:
<div class="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown"> Teams<b class="caret"></b>
<ul class="dropdown-menu">
<li>Freshman</li>
<li>Junior Varsity</li>
<li>Varsity</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- /.navbar-collapse -->
Working Fiddle.