I am using twitter bootstrap v3 to create a navbar and I follow their documentation
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="/">Title</a>
<ul class="nav">
<li>About</li>
<li>Feedback</li>
<li>whoami</li>
</ul>
</div>
</div>
</div>
But the navbar is not created. Here is the demo
What is that I am missing here?
Actually, you need the class "navbar-nav" on your ul :
<h1>Hello Plunker!</h1>
<div class="navbar">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
Note that you can change h1 for a link directly in the nav like this:
<div class="navbar">
<a class="navbar-brand" href="#">Hello Plunker!</a>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
The reason that documentation page doesnt work for you is because it's using a different style sheet.
If you use that documentation page's stylesheet..it'll work.
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" />
Documentation is just old.
I was looking at wrong version of docs(v.2.3.2), the correct documentation for v3.0.0 is here and that fixed my issue
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
<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 navbar-ex5-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
The demo is updated and can be found here
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>
Hello stackoverflow people, I need help with centering my Website Title, here is the print screen of website:
As you can see Website title is in the left of the navbar here is my html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!--Mobilus buttonas-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Website title</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
<ul id="top-menu" class="nav navbar-nav navbar-right main_nav">
<li>Team</li>
<li>Pricing</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div>
</div>
</nav>
I'am using bootstrap so there is no point posting css, so I will give you jsfiddle so it could be simplier: https://jsfiddle.net/fNPvf/18964/ . So i repeat, I don't know how to make Website Title in the center of website?
Try this:
.navbar-brand {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
Build something like col5-col2-col5. You maybe have to adjust this for other resolutions. Centering stuff without flexbox is always a pain.
Like this:
<header id="header">
<!--Meniu laukas-->
<div class="menu_area">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
<div class="col-md-2">
<div class="navbar-header">
<a class="navbar-brand" href="#">Website title</a>
</div>
</div>
<div class="col-md-5">
<ul id="top-menu" class="nav navbar-nav navbar-left main_nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Works</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
</header>
https://jsfiddle.net/fNPvf/18972/
add the following class in your css
you may adjust this value for various media queries and add the class to the container check the following fiddle https://jsfiddle.net/fNPvf/18975/
.center-container{width:705px;}
I have created a navbar and made it container width by adding .container to the .navbar classes. I have created a new row below but its container is less wide than the navbar. I'm sure I've done something stupid but not sure what
<div class="navbar navbar-default navbar-fixed-top container" role="navigation" id="topnavbar">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#"><img src="assets/newOrangelogo2.svg" width="300"></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 pull-right">
<li class="active">Home</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="sliding-u-l-r" href="#">About Me</a></li>
<li>Services</li>
<li>Process</li>
<li>Clients</li>
<li>Prices</li>
</ul>
</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
<div class="row no-gutter">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
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.