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.
Related
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
I'm using bootstrap to have a see-through nav when the page first opens, but as soon as the user scrolls down and the navbar collapses it changes to a white background.
I use this to make the background color change:
.top-nav-collapse {
background-color: #FFFFFF !important;
}
And I know from extensive Googling that this changes the color of the hamburger icon in general:
.navbar-default .navbar-toggle .icon-bar {
background-color: black;
}
However, I can't seem to get the color to change only on collapse. Here's my nav bar code:
<nav class="navbar navbar-fixed-top z-depth-1" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<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 waves-effect waves-light pull-left" href="/"><%= image_tag 'Flame.png', style: "height: 100%"%></a>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li>Workouts <span class="sr-only">(current)</span></li>
<li><%= link_to 'Blog', posts_path, class:"waves-effect waves-light" %></li>
<li>Equipment</li>
<li>About Us</li>
</ul>
</div> <!-- navbar collapse -->
</div> <!-- container-fluid -->
</nav>
Can anyone shed any light on this?
Difficult to completely understand what you're asking, but I think you're just looking for this
.navbar-toggle.collapsed .icon-bar {
...
}
If you use as-is, you might need to !important any properties to override the Bootstrap defaults. Otherwise add any necessary specificity (i.e. #main-nav .navbar-toggle...) to the selector and you should be good.
I am trying to add a Twitter logo to my header (I use Bootstrap CSS) but it's screwing up the alignment. I was trying to put them side by side, but instead it shoved them beneath. Here was my first attempt:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">#Cardshifter</li>
</ul>
</div><!--/.nav-collapse -->
</nav>
This is how it renders:
This was my second attempt using <div> instead of <ul>:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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 csh-top-link" href="index.html">Cardshifter</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<div class="nav navbar-nav">
<img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">
</div>
<div>
#Cardshifter</li>
</div>
</div><!--/.nav-collapse -->
</nav>
That seems like a slight improvement, as in they are separate elements (note the light blue contour on the right only appears in my Brackets live preview, not on the actual rendition):
I have tinkered around with CSS margin and padding on both the <ul> and <div> versions with no apparent improvement. If you wish to see the code in context, it is currently hosted on Github until a solution is found. The desired layout is side by side:
[Cardshifter] | [Twitter logo] | [#Cardshifter]
You can do simple alignment of list-items with a … list!
HTML:
<ul class="navbar">
<li>
Twitter logo here
</li>
<li>
Twitter handle here
</li>
</ul>
CSS:
.navbar {
/* Just a little housekeeping … */
list-style: none;
margin: 0;
}
.navbar > li {
display: inline-block;
}
#kleinfreund got the correct solution, however a bug was pointed out as a comment to the question, which (combined with the accepted answer) completely fix the problem:
correct answer is below, also what up with the percentage inline
widths on the image? That's a whole lotta bad going on there. Dump the
inline styles, don't use percentages for widths on a bitmap image, use
the exact pixel size and use the HTML height and width attributes. –
Matt Lambert 3 hours ago
So I changed the code to this and it work completely:
<div id="navbar" class="collapse navbar-collapse">
<ul class="csh-twitter nav navbar-nav">
<li>
<img src="images/logos/Twitter_logo_blue.png" style="height: 25px; width: 30px; margin-top: 10px;">
</li>
<li>
#Cardshifter
</li>
</ul>
</div><!--/.nav-collapse -->
Rendering:
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)
I am using bootstrap 3x. I have the following navbar :
<div class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<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="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
When I use the container class - <div class="container"> I get a lot of padding which in bigger resolution looks even worse and even though I use nav-justifed it's like the menus are centered. This screenshot can make it more clear
But I want to avoid this padding and let the menus occupy the whole space like this :
The second image is when the <div class="container"> is commented. I guess the padding that I still get is from the .navbar class but it's still better. But I wonder - is it ok to remove the <div class="container"> from the navbar, because to me it doesn't seem like very good idea (may be wrong though). Also I'm still getting padding so my questions are:
Is it ok to remove the <div class="container">?
Can you help with a CSS based solution which I think will be better here?
Edit:
PrintScreen with changed width:
The .container class is enforcing both a responsive static width, which is causing this behavior, but it's also providing framework consistent padding on both sides and automatically calculated margins (margin-left: auto; margin-right: auto). Removing it isn't a great idea.
Understand that restricting the width (generally via max-width) is usually desirable, as justifying your navigation without it may not work well on larger screens (e.g. 27" Thunderbolt display). That said, if you're sure about your approach, you can extend the core by adding a .full-width class to that container, then target .container.full-width and set width: auto. Be sure to do all of this in a separate stylesheet, though, rather than modifying Bootstrap's core:
HTML
<div class="navbar" role="navigation">
<div class="container full-width">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<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="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
CSS
.container.full-width {
width: auto;
}
Because you're overriding the core, you may also want to add !important to avoid issues of specificity, although the Codepen below doesn't indicate a need for it. Just keep it in mind.
Finally, using Bootstrap's justified nav feature is noted as having issues in current versions of Chrome and Safari, so you may want to think twice before using it.
Here's a codepen.
make use the class 'container-fluid'
look:
<div class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-secondary">
<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="navbar-collapse collapse" id="nav-secondary">
<ul class="nav nav-pills nav-justified">
<li style="border: 1px solid grey">Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>