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
Related
I have a navbar that does collapse as it should in mobile view but on the tablet (or ipad pro) there is a break or large padding/gap that breaks the navigation. The testing site is at:
padding or margin bottom occurs in tablet view
I have tried a number of things like adjusting the viewport and adding links to bootstraps transition.js and collapse.js files but that is not working either.
<!--navigation bar-->
<nav class="navbar navbar-default transparent navbar-static-top" role="navigation" id="navbar-main">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-lg-12"> <a class="navbar-brand" href="http://patskailua.com/index.php"><img src="http://patskailua.com/images/kailua-beach-properties-llc.png" alt="pats kailua hawaiian Flower" usemap="#Map" class="img-responsive">
</a></div>
</div>
</div>
</div>
</div>
<div class="navbar-header">
<div class="text-center">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navCollapse">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-chevron-down"></span> Menu
</button>
<div class="collapse navbar-collapse" id="navCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active goleft1">vacation rentals</li>
<li>kailua activities</li>
<li class="dropdown">
rentals by size<span class="caret black"></span>
<ul class="dropdown-menu">
<li><a href="http://patskailua.com/wp/three-bedrooms.php" >Three Bedrooms</a></li>
<li>Two Bedrooms</li>
<li>One Bedrooms</li>
<li>Studios</li>
</ul>
</li><li>contact us </li>
<li>about us</li>
<li class="dropdown">
property management and sales<span class="caret black"></span>
<ul class="dropdown-menu">
<li>Property Management</li>
<li>Buying a Property</li>
<li>Selling a Property</li>
<li class="goleft">home</li>
</li>
</ul>
</div>
</nav>
<!--end nav bar-->
If anyone has any ideas on how to fix this, that would be great. Thanks so much. -Beth
You could try changing the class col-lg-12 by col-md-12 or even col-sm-12.
This should make your navbar adapt better smaller resolutions.
I'm using Pico CMS. Here is the navigation code
<!-- Navigation -->
<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseID">
<span class="sr-only">Toggle navigation</span>
Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#">Broadstone Services</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="collapseID">
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
About
</li>
<li>
Solutions
</li>
<li>
Contact
</li>
<li>
Blog
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
When my page is full screen, the menu items look great. However, when the page window is made a lot smaller (or on mobile) the menu doesn't expand.
You are not loading the jQuery and Bootstrap JavaScript libraries that perform the functional uncollapse.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>
See http://getbootstrap.com/getting-started/
For functional reference see: https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js#L557
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.
Ok I have looked all over the css and can't seem to figure out what is determining the width between the top level links on my navbar. I need to make them just barely smaller so when it adjust for a sub 900px screen it doesn't turn it into a 2 row navbar instead of the usual 1 row.
I tried something like navbar > li but had no success getting them to move. But to no avail so I am asking
Thank You here is my navbar code
<div class="navbar-wrapper">
<!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
<div class="container">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
<button type="button" 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>
</button>
<a class="brand" href="index.html">PC3</a>
<!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="dropdown">
About Us <b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Services</li>
<li>Core values</li>
<li>Staff</li>
<li>How To Know God</li>
<li>Volunteering</li>
<li>Giving</li>
<li>Directions & Contact</li>
</ul>
</li>
<li class="dropdown">
Adult Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Personal Spiritual Trainer</li>
<li>Care Team</li>
<li>Hospitality team</li>
<li>Intercessory Prayer</li>
<li>Women's Ministry</li>
<li>Amplified Worship</li>
<li>Sermons</li>
</ul>
</li>
<li class="dropdown">
Student Ministries<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Just For Parents</li>
</ul>
</li>
<li class="dropdown">
PC Kids<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Overview</li>
<li>Videos</li>
</ul>
</li>
<li class="dropdown">
Life Groups<b class="icon-chevron-down icon-white"></b>
<ul class="dropdown-menu">
<li>Schedule</li>
<li>Leaders & Group Info</li>
</ul>
</li>
<li>Events</li>
<li>Missions</li>
</ul>
</div><!--/.nav-collapse -->
</div><!-- /.navbar-inner -->
</div><!-- /.navbar -->
</div> <!-- /.container -->
</div><!-- /.navbar-wrapper -->
I figured out what I was looking for, didn't look in the second css, which has the responsive css and didn't edit the padding for the .inner class.
That was my fault thank you tho
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