I have a bootstrap navbar but it is not opening the menu list when clicked. The issue started occuring when I tried to change the breakpoint as my menu list was overflowing. Please have a look at the code. I feel the issue is occuring with the css part
http://jsbin.com/wadazijute/edit?html,css,output
Please check the image below.
Toggle appears after the screen width is 768px but I want the toggle to appear before that to avoid the navigation menu to appear like this:
http://imgur.com/QZzAMKz "navbar issue"
The code for a working collapse is:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#myCarousel">Pinak Das</a>
<button type="button" class="navbar-toggle collapsed" 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>
<!-- 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>Education</li>
<li>Technical Skills</li>
<li>Experience</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
No extra CSS required.
Working example at JSFiddle
Related
I have a webpage which has a standard bootstrap header (with a logo and dropdown section) and a sidebar for navigation.
I'm trying to make the sidebar collapse when the screen size is small. For this, I've made a toggle button which collapses the menu just fine. But the problem is that it seems that even when the collapse-able menu is closed, some contents still show up on top of everything.
Here's a screenshot to show you what I mean.
The purple box shows that even when the menu is closed, its contents somehow show up on top of the other elements.
Is there a fix for this?
Here's the code:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<span class="caret"></span>
<a class="navbar-brand pull-right" href="#">Company Logo</a>
</div>
<ul id="side" class="nav navbar-nav collapse visible-xs">
<li>Home</li>
<li>Stuff</li>
<li>List Example</li>
<li>Contacts</li>
<li class="dropdown">User <span class="caret"> </span>
<ul class="dropdown-menu">
<li>Profile</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
</nav>
Try adding this to the navbar-header
<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>
and remove the visible-xs too from there.
I have spent already several hours trying to correctly position several elements in a fixed bootstrap navbar, but I do not manage to have exactly what I would like. This is what I have so far:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header pull-left">
<a class="navbar-brand" href="http://www.aprentiko.com">brand</a>
<p class="navbar-text">title of the page</p>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav navbar-right">
<li></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
<li></span></li>
</ul>
</div>
<div class="navbar-header pull-right">
<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>
<ul class="nav navbar-nav">
<li><span id="audioInPause" class="glyphicon glyphicon-play"></span></li>
</ul>
</div>
</div>
</nav>
The problems I have are the following:
I would like to position the "title of the page" element in the middle of the screen, but it always stays in the left, next to the brand.
The audioControl item should be independent of the other icons in the right side (i.e. it should not collapse when the viewport becomes too small. I achieved the "not collapsing" part, but when the icons collapse I get a) the play button always goes in a second row, b) clicking on the collapsed button activates the play button, instead of opening the menu to select one of the collapsed items.
I created a jsfiddle at https://jsfiddle.net/cwx1wvo7
I can answer the first one quickly, but I don't know if it will work with collapse, you can play around.
I agree with the comment above about by MattD. As a twist, partition your nav using col-lg-xx col-md-xx etc then use text-center
As an example to give you and idea,
<div class="navbar-header pull-left col-lg-10 col-md-9">
<a class="navbar-brand" href="http://www.aprentiko.com">brand
<p class="text-center navbar-text">title of the page</p>
</a>
</div>
<div class="collapse navbar-collapse navbar-right col-lg-2 col-md-3">
in fact, u should take a look at the bootstap.css to have an idea of the classes used to code elements.
the ms-md-auto move ur elements to the right:
.ms-md-auto {
margin-left: auto !important;
}
<ul class="navbar-nav ms-md-auto mb-2 mb-lg-0" >
I think the best would be I provide the website link which is : www.youthlife.de
I am trying to position the little brand logo closer to the navbar without changing the position of the navbar itself.
If I put a margin-left to the brand, the navbar moves as well. I don't get why. What regulates the distance between the brand and the navigation bar?
I don't know what size of height and width of your logo.
Here's what I have tried.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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=""/>
Start Bootstrap</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> About
</li>
<li> Services
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</nav>
This is the CSS:
.navbar-brand img {
width:90px;
height:25px;
display:inline-block;
margin-top:-3px;
}
You can check the demo HERE.
Now, let me know further if it is not what you wish.
Hint: Pls provide some codes to see what's been wrong with it.
In a nav bar like this:
http://getbootstrap.com/examples/navbar/
When the window gets small enough the menu items disappear and the 3 lined button appears. I was wondering what changes are occurring when this occurs. I especially want to know what classes are added to what. My code is the following and acts like the link above. I have used inspect element but I don't see any changes occurring. Thanks!
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button id="menuButton" 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>
<h4>Title</h4>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">A</li>
<li class=""><a href="#" >B</a></li>
<li class=""><a href="#" >C</a></li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
There's no class-toggling behind this particular change; while you're inspecting the element, watch the CSS that's being applied. The different forms of the navbar display are based on media queries. For example:
#media (min-width: 768px) {
.navbar-toggle {
display:none
}
}
is the css that makes the menu icon button disappear at larger screen sizes.
I'm trying to get an app to work nicely with a mobile browser, having got it working well on a normal desktop. I'm just starting out on the responsive layout stuff so am a bit of a newbie here.
I have the bootstrap nav-bar working down to 768px as shown here
but at 768px and below it does this
So, I'm obviously missing something in my css but have NO idea how to get the menu to stack as I thought it would automagically at the mobile browser sizes (isn't that what bootstrap is meant to do for me?).
The code being used to generate the menu is
<template name="header">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><i class="glyphicon glyphicon-home"></i></li>
</ul>
<ul class="nav navbar-nav">
<li>Make a request</li>
</ul>
<ul class="nav navbar-nav">
<li>Packing</li>
</ul>
<ul class="nav navbar-nav">
<li>Admin</li>
</ul>
<ul class="nav navbar-nav navbar-right">
{{>loginButtons}}
</ul>
</div>
</div>
</template>
Thanks guys, my lack of understanding is glaring I assume.
Peter.
You need to include the following in your navbar markup;
<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="#">Brand</a>
</div>
See the documentation on the navbar here
Bootstrap will do what you are expecting it to, given you use the right tags and classes. For the navbar, you've missed <div class="navbar-header"> which holds the toggle-button to show/hide the menu on smaller viewports. The code looks like:
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
The navbar1 is the id from your .navbar-collapse div.
<div class="navbar-collapse collapse" id="navbar1">
You can also add an anchor tag within the div for adding any logo or brand name:
<a class="navbar-brand" href="#">Logo/Company name here</a>
DEMO (Click on the mobile icon to see it in mobile view)