I'm just building a navigation for bootstrap that will get special styles.
The Desktop Clients get a different Style (tabs).
This is the structure I'm using:
<nav class="navbar navbar-default hidden-lg hidden-md" role="navigation">
<div class="container">
<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="#">
Navigation Title
</a>
</div>
<!-- Collect the nav links for toggling -->
<div class="collapse navbar-collapse" id="navigationcontent">
<ul class="nav navbar-nav">
<li>
<a href="link1">
Entry 1
</a>
</li>
<li>
<a href="link2">
Entry 2
</a>
</li>
</ul>
</div>
</nav>
The Navigation works, but the responsive Design is not working (collapsing to a drop down navigation)
What am I missing?
Change the id navigationcontent to bs-example-navbar-collapse-1 or vice versa
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
You have to make sure that data-target should use the valid id or class name of associated navbar-collapse div
button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Js Fiddle Demo
You dont have a navigation menu that your drop-down nav is targeting.
See the target here: data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
You need this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
A reference here.
Related
I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste code from the W3Schools examples and the Bootstrap website. I don't know what else to do. Please help.
This is the W3Schools example code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
This is example code from the Bootstrap website:
<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">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Both do not work. And yes, I've triple checked my <link> and <script> tags.
Edit: here is my CodePen
First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" 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="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As someone said - remove bootstrap 4 from loaded CSS files and it will work
I have a problem with Bootstrap's navbar: https://jsfiddle.net/2wwgt3to/1/
I'm making single page application and it turns out that bootstraps dropdown navigation menu for mobile is not really working well with it i.e. its not collapsing after clicking, I managed to solve this with adding data-toggle="collapse" data-target="#navbar" attributes but then the whole menu is collapsing even when it is not in dropdown form.
Remove data-toggle="collapse" data-target="#navbar" from
<div data-toggle="collapse" data-target="#navbar" id="navbar" class="navbar-collapse collapse">
Edited code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
1st problem :
I'm trying to make a navbar in one row, however, it breaks in two rows even if there is enough space. I don't want to include the Sign in button in the collapse navbar-collapse div.
Here's what i got :
https://jsfiddle.net/fsjowxqn/
2nd problem :
I want my navbar to stay visible even if the user scrolls down, i added the navbar-static-top class like this :
<nav class="navbar navbar-default navbar-static-top">
but it doesn't seem to be working.
any help would be appreciated. Thank's in advance.
Add navbar-left to the collapse nav div
<div class="collapse navbar-collapse navbar-left" id="bs-example-navbar-collapse-1">
Add sign_in class to your sign in button parent
<ul class="nav navbar-nav navbar-right sign_in">
and then add the following css
#media (max-width: 767px) {
.sign_in {
position: absolute;
right: 100px;
top: -7px;
}
}
hope it works for your scenario
You have place your last button in the wrong div (see ****move here****)
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- 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">
<li class="active">Homepage <span class="sr-only">(current)</span></li>
<li class="dropdown">
Forum <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
<li>Become a Moderator</li>
<li>Contact</li>
<li>Donate</li>
</ul>
<ul class="nav navbar-nav navbar-right"><!-- *****move here *****-->
<li><button type="button" class="btn btn-info navbar-btn">Sign in</button></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
ANd for Second question
and for fixed use navbar-fixed-top
<nav class="navbar navbar-default navbar-fixed-top">
Sign in button should be neasted with some element in your nav, like the navbar-header or the container. Like this for example:
Change navbar-static-top by navbar-fixed-top:
Here is your JSFiddle i've updated: https://jsfiddle.net/Pontual/fsjowxqn/3/
<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>
<ul class="nav navbar-nav navbar-right">
<li><button type="button" class="btn btn-info navbar-btn">Sign in</button></li>
</ul>
</div>
I wanted to put text or image logo above navbar. Got it working with responsive utilities. The question is, Is that the right way? The problem is text/logo is 2 times mentioned on page. First in .master-logo and second in .navbar-brand.
Does it affect search engine optimization?
Is there other way to implement this?
Code to better understanding:
<header id="site-header">
<div class="container">
<div class="master-logo hidden-xs">
Brand
</div>
</div>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<!-- 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 visible-xs" 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">
<li>Home</li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
Don't mix up the logo with H1 tag.
Search engines don't evaluate your logo that much. They focus on the page title and the H1 Tag.
I need a complete right-aligned navbar in bootstrap but the problem is my brand is in the left side but I need it to go to right side. Although I can put other list items using navbar-right option to the right side.
<nav class="navbar navbar-default" 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="#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 pull-right" href="#">CesaStack</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">بیاب</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
Move the brand above the navbar-header and give it the class navbar-right.
This puts your brand on right when in desktop views, and it goes left in mobile views, properly keeping the menu button as the rightmost element.
http://jsfiddle.net/KHtU4/
<nav class="navbar navbar-default" role="navigation">
<a class="navbar-brand navbar-right" href="#">CesaStack</a>
<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>
</div>
<div class="collapse navbar-collapse">
<!-- snip -->
</div>
</nav>
The brand is on the left side, even though it has the class .pull-right, because it is contained in
<div class="navbar-header">
..
<a class="navbar-brand pull-right" href="#">CesaStack</a>
</div>
if you place it outside, just after .navbar-header-></div>, then it will be aligned to the right as it should.
See your code in this fiddle -> http://jsfiddle.net/9BfjX/
What you need to use is navbar-right not pull-right
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
**LOGO OR HEADER NAME HERE**
</div>
<div class="navbar-collapse navbar-right collapse">
**OTHER MENU OR FORM HERE**
</div><!--/.navbar-collapse -->
</div>
<nav class="navbar navbar-default" role="navigation">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Left</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
</nav>