I'm working with twitter bootstrap responsive nav bar and I'm trying to figure out how to make the brand show up only when the nav bar is in collapsed mode.
I'm thinking there might need to be some extra js involved but i'm not sure what that is or where to put it.
Here's what I've got:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="#">Navigation</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav nav-pills">
<li>Nav 1</li>
<li>Nav 2</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Programs
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
<li>Program 1</li>
<li>Program 2</li>
<li>Program 3</li>
<li class="divider"></li>
<li>Program A</li>
<li>Program B</li>
<li>Program C</li>
</ul> <!-- closes dropdown menu -->
</li> <!-- closes dropdown class -->
</ul> <!-- closes nav-pills -->
</div> <!-- closes collapse -->
</div> <!-- closes container -->
</div> <!-- closes navbar-inner -->
</div> <!-- closes overall navbar -->
Right now, brand displays all the time, but I want it to display only when in collapsed mode so viewers know that is the nav bar. They don't need to see it in larger screen modes.
Any resource might help.
Thanks for your time.
Craig
An easy way to solve this problem is to use the Responsive utility classes provided by Bootstrap:
Bootstrap 4:
Source
Bootstrap 4 alpha:
Bootstrap 3:
Example:
<a class="brand hidden-lg" href="#">Navigation</a>
Bootstrap 2:
Example:
<a class="brand hidden-desktop" href="#">Navigation</a>
For Bootstrap 3 use the below classes
Ref: http://getbootstrap.com/css/#responsive-utilities-classes
Since Bootstrap3.2 visible-xs, visible-sm etc. are deprecated. Reference: http://getbootstrap.com/css/#responsive-utilities-classes
So in this case you should use either:
<a class="brand visible-xs-block" href="#">Navigation</a>
or
<a class="brand visible-xs-inline" href="#">Navigation</a>
or
<a class="brand visible-xs-inline-block" href="#">Navigation</a>
depending what type of display property should be applied to this link.
This will display your Navigation brand link only when your navigation is collapsed
Related
When I click on the hamburger menu in my nicely collapsed bootstrap navbar on my phone, the layout slides to the side as expected, but shows me an empty white (or whatever body background colour I have) bar instead of the navigation. Closer inspection with firebug showed that upon clicking the button, some classes got changed on the navbar-collapsebut it remains tagged as invisible.
I have recompiled Bootstrap from LESS to change the point at which it collapses, but the issue seems persistent even with 'vanilla' bootstrap.
Code:
<nav class="navbar transparent navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header" style="padding-right: 0px; min-width: 50px;">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-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 hidden-xs hidden-sm" href="index.html"><span class="glyphicon glyphicon-home" style="padding-right: 0px;"></span></a><a class="navbar-brand hidden-lg hidden-md" href="index.html">De Fijnkost</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navigation-example-2">
<ul class="nav navbar-nav navbar-right">
<li>
Fijne Vleeswaren
</li>
<li>
Bereide Gerechten
</li>
<li>
Eigen salades
</li>
<li>
Kazen & Kaasschotels
</li>
<li>
Belegde Broodjes
</li>
<li>
Contact
</li>
<li>
Nieuws
</li>
<li class="dropdown">
<a class="dropdown-toggle btn btn-white btn-fill" data-toggle="dropdown" href="#">Bestel <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
Kaasschotel
</li>
<li class="disabled">
Broodjes
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid-->
</nav>
Same thing happens on pages without the transparent or navbar-fixed-top class. transparent is added by my CSS. Page is visible on defijnkost.be
Your .navbar-collapse is set to display: none !important as far as I can see.
If you set it to display: block in your mobile view media query it should show up just fine.
The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.
This is what it looks like:
As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.
Here is the HTML for the navbar:
<nav class="navbar navbar-fixed-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" href="index.html"><img src="img/EPG.jpg"></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 navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?
Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:
.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
top:30px;
}
Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.
I use bootstrap and i'm showing a language selection in the header.
Now when i reduce the width, bootstrap is going to put my elements in a mobile selection. (s. screenshot)
Most of the time thats a good thing, but in some cases i want options to stay visible. Fest option on the left side of the mobile menu.
<div class="navbar-header">
....
</div>
<div class="collapse navbar-collapse" id="navbar-main">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
If I make two groups like
<ul class="nav navbar-nav navbar-right">
.. Non collapsable items
</ul>
<div class="collapse navbar-collapse" id="navbar-main">
.. collapsable items
</div>
then the non collapsable items are placed below the menu and not on the left side of it.
Here you go. Sounds like you want to exclude some menu items from the boostrap mobile view. I had similar question, and answer here.
Exclude menu item from the collapse of bootstrap 3 navbar
Reshared*
Below is an example that shows how to have just about any kind of 'vanilla bootstrap' NAVBAR configuration you could want. It includes a site title, both collapsing and non-collapsing menu items aligned left or right, and static text. Be sure to read the comments to get a fuller understanding of what you can change. Enjoy!
Fiddle: http://jsfiddle.net/nomis/n9KtL/1/
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
GNOMIS
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropdown pull-right">
<span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li>
Profile
</li>
<li>
Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><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 Collapsing items navbar-left or navbar-right -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>News</li>
<li>Shop</li>
</ul>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator</li>
<li>Extras</li>
</ul>
</div>
</div>
</nav>
original answer: Exclude menu item from the collapse of bootstrap 3 navbar
In order to remove a menu section from the auto-collapsing feature of Bootstrap, you need to move it outside of the . Something like the following:
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
<ul class="nav navbar-nav"> <!-- Items in here won't collapse -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Deutsch<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>French</li>
<li>English</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse" id="navbar-main"> <!-- Anything in here will collapse -->
<ul class="nav navbar-nav navbar-right">
Link
Another Link
</ul>
</div>
</div>
Anything inside the "collapse" div will collapse into the mobile menu. Anything that is not there, like the navbar-brand link in most menus, will not.
Hope that helps.
How to collapse bootstrap navbar from the side?
If you view this Bootstrap template self starter on a phone or by reducing your browser windows width then the navbar only shows project name. You can then view the whole menu by clicking on the small button on the side.
How can I change this to something similar to what stripe.com has for mobile browsers?
there navbar is from the side
Bootstrap 3
Take a look at this "Off-canvas" sidebar example on Bootply. You'll see that the nav-collapse fills in from the right-side on smaller viewports.
Bootstrap 4:
Create a responsive navbar sidebar "drawer" in Bootstrap 4?
Try this
Befor you have bootstrap-combined.min.css file and <meta name="viewport" content="width=device-width, initial-scale=1.0"> in head section
<div class="row-fluid">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container-fluid">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><i class="icon-home icon-white"></i> Home</li>
<li>Features</li>
<li>Pricing</li>
<li class="dropdown">
More<b class="caret"></b>
<ul class="dropdown-menu">
<li>Blog</li>
<li>About US</li>
<li>Jobs</li>
</ul>
</li>
<li>Documentation</li>
<li>Help & Support</li>
<li class="button">Sign in</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
Fiddle
Jsfiddle
I used a responsive navigation bar from Bootstrap:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
<ul class="nav">
<li>Item 1</li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#">Item 2</a>
<ul class="dropdown-menu">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
</div>
but when I add this wordpress php function :
<?php wp_nav_menu(array('menu' => 'Main Menu')); ?>
instead of all the "li" tags to pull the nav items dynamically, the style of the navigation bar disappears.
It works to put this php in a simple "nav" tag with "li" tags and stuff but in this html it doesn't...
What should I do to solve this problem? I want the navigation to be responsive, did I use the bootstrap code wrongly or what? Please help
UPDATE: remember that everything works I mean php retrieves the navs item, the only problem is that there's no style...
Bootstrap and Wordpress menus don't work together out of the box. In order to integrate the two, I suggest using wp-bootstrap-navwalker: https://github.com/twittem/wp-bootstrap-navwalker