Im using bootstrap-collapse.js v2.3.0, but for some reason on the first click the menu just appears and doesnt slide down.
I also noticed the height doesnt say auto , it says 205px. I dont have the menu set to this height anywhere in the CSS.
After the first click, when I go to toggle it closed, everything seems perfect, the height toggles between 0 and auto and there is a smooth transition as opposed to it instantly appearing.
Im unsure as to what code to include as it seems to be the bootstrap toggle that is the problem,
however here is the html...
I removed irrelivent bits of code..
<div class="navbar">
<div class="navbar-inner">
<a data-target=".nav-collapse" data-toggle="collapse" class="brand visible-phone">
Categories
</a>
<a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li> //more code </li>
<li class="dropdown">//more code<<b class="caret"></b>
<ul class="dropdown-menu" >
<li>//code</li>
<ul>
<li>//code</li>
</ul>
</ul>
</li>
<li>//code</li>
but here is a link to the site...
http://bc_mobile.hailstormcommerce.com/
Plz check this jsfiddle JSfiddle for you with navigation
<div class="navbar">
<div class="navbar-inner">
<a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
<i class="icon-bar"></i>
</a>
<a class="brand" href="">New Icon Menu</a>
<div class="nav-collapse">
<ul class="nav nav-pills pull-right">
<li><i class="icon-home icon-2x"></i> Home<br>
</li>
<li><i class=" icon-pencil icon-2x"></i>About Us
</li>
<li><i class=" icon-briefcase icon-2x"></i>Portfolio
</li>
<li><i class=" icon-envelope icon-2x"></i>Contact Us
</li>
</ul>
</div>
</div>
Related
I am using Bootstrap 3 and I want to create a sidebar, like the one that appear in mobile apps where they are hidden initially and appear from left to right on click.
The following html which uses bootstrap, creates a nav bar which on smaller devices changes into a collapsable icon. On clicking the icon the menu appears from top down. Does bootstrap provide feature to change the transition direction? Please help, I am new to css and bootstrap
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header pull-left">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Demo</a>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">City <span class="caret"></span></a>
<ul class="dropdown-menu">
<li></li>
<li>Pune</li>
<li>Hyderabad</li>
</ul>
</li>
<li>menu item</li>
<li></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
Bootstrap has built in functionality for sidebar menus.
http://startbootstrap.com/template-overviews/simple-sidebar/
http://bootsnipp.com/snippets/featured/navigation-sidebar-with-toggle
I can't get a bootstrap vertical menu to collapse when using media queries.
There is too much code to put it all in here so I created a fiddle -
https://jsfiddle.net/DTcHh/
I don't mind re-writing the menu however it was the only way I could get this kind of menu. I am basing my technology off this website as this was the clients demand -
http://www.rhiwbeinaprm.co.uk/
I am trying to create their home page menu but in bootstrap so it is responsive. any help is greatly appreciated.
<div class="navbar">
<nav class="navbar navbar-default">
<div class="container-fluid"><div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="root">
</li><li class="dropdown-submenu"> <a tabindex="-1" href="#">Welcome</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Headteacher</a>
</li>
<li><a tabindex="-1" href="#">School Motto</a>
</li>
</ul>
</li>
</ul>
</div>
</div
The issue is, when scrolling below around 750px and below, the whole thing just disappears.
Where is the navigation button?
Add an id to: <div class="navbar-collapse collapse">
<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="#">Bootstrap 3</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
...
</div>
Update fiddle: https://jsfiddle.net/wZVanG/DTcHh/8623/
you have the following issues with your code:
You are duplicating something here by using a div and a nav both
with class navbar. I don't know why but that's weird.
Your collapsing div doesn't have id. the id will allow the button to target it for dropdown
The button that is supposed to hold the toggle for dropdown isn't in your code.
Since your collapsing div doesn't have an Id, your dropdown button wouldn't be pointing to anything
Your jsFiddle is different from the code posted here.... The following code is based on the one from your jsfiddle.
Working bootply
Your website takes a lot of time to load, to improve the user experience you might consider loading the js files after or creating a loading screen. The following code is for the navbar.
<div class="container">
<div class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Bootstrap 3</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>
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown active">
Getting started <b class="caret"></b>
<ul class="dropdown-menu">
<li>Download Bootstrap</li>
<li class="divider"></li>
<li class="dropdown-header">Examples</li>
<li>Basic template</li>
<li>Starter template</li>
<li>Grids</li>
<li>Jumbotron</li>
<li>Navbar</li>
<li>Sign-in page</li>
<li>Sticky footer</li>
<li>Offcanvas</li>
<li>Carousel</li>
<li>Theme</li>
<li class="divider"></li>
<li class="dropdown-header">Compatibility</li>
<li>Migrating from 2.x to 3.0</li>
<li>Browser support</li>
<li>Third party support</li>
</ul>
</li>
<li>CSS</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Customize</li>
</ul>
</div>
</div>
<div class="jumbotron">
<h1>Twitter Bootstrap 3.0</h1>
<p class="lead">Starter template with CSS and JS included.</p>
<p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
</div>
</div>
I am new to using Twitter Bootstrap and I have a navbar that doen't collapse as it should.
It shows well on a desktop at fullscreen (all menu items on one line) but as I collapse my browser window from left to right, the navbar items grow to become two rows before appropriately stacking one on top of the other until full collapse.
How do I make the navbar collapse as it should?
I also have a div that I want to place right below the navbar div to show a company logo (image). However, the div seems to start right at the top of the page insted of directly below the navbar div.
How do I fix this?
See: Demo JSFiddle
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">XYZ</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span>Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-list-alt"></span>Products<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline Sheets</li>
<li>Onduvilla Tiles</li>
<li>Other Products</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-ok-sign"></span>Guarantee<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Our Guarantee</li>
<li>Tests and Certificates</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-user"></span>Our Clients</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-camera"></span>Projects<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Expos</li>
<li>Training</li>
<li>Eco Friendly Housing</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-inbox"></span>FAQ<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Onduline</li>
<li>Onduvilla</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-download-alt"></span>Downloads</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-info-sign"></span>About<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Vision and Mission</li>
<li>Eco-Responsibility</li>
</ul>
</li>
<li><span class="glyphicon glyphicon-pencil"></span>Contact Us</li>
</ul>
</div>
</div>
</div>
<div id="TitleContent" style="text-align: center">
<img src="images/ecolinelogo.jpg" style="border-style: none" >
<br />
</div>
<div class="container body-content">
<div id="MainContent">
</div>
<hr />
<footer>
<p>© <?php echo date("Y"); ?> - Copyright © XYZBuilding Supplies Ltd - All rights reserved</p>
</footer>
</div>
First of all give your body a little bit of padding as per you navbar height
body{
padding-top:100px;
}
because you are using fixed navbar which is fixed at the top of the page. any content you are going to put after this div will start from the body top. so the padding is necessary which is also mentioned in the docs of bootstrap.
and also you have too many menu item in your menu . which is not getting the proper space specified by the columns. so you need to control them via media queries. and i try to make it work for you here is my jsfiddle link. you could check it . It might helpful for you
http://jsfiddle.net/datechogeek/w4sJC/
I'm building my webapp and I dont like the way my navbar looks when collapses. I'd rather just have a different navbar for mobile users and basically any browser that falls below the width threshold.
So rather than how bootstrap just turns your navbar into a list, I'd rather make it look nice with clickable icons.
What's the best way of going about this? Here's my current navbar.
<nav class="navbar navbar-default navbar-fixed-top" 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 {{action toggleProperty "showNotifications"}} id="not-container-mobile" class="navbar-toggle" style="position:relative">
<i
class="icon-globe icon-large use-blue"></i>
{{#if showNotifications}}
{{view App.NotificationView}}
{{/if}}
</div>
<a class="navbar-brand " href="#"><img class="logo"
src="/images/app_dark.png"></a>
</div>
<div class="navbar-header navbar-right">
<div class="navbar-collapse collapse" >
<ul class="nav navbar-nav navbar-right">
<li>
<div {{action toggleProperty "showNotifications"}} id="not-container" style="position:relative">
<i
class="icon-globe icon-large use-blue"></i>
{{#if showNotifications}}
{{view App.NotificationView}}
{{/if}}
</div>
</li>
<li>{{view App.SearchView}}</li>
<li>
<div class="navbar-header navbar-right">
<p class="navbar-text">
{{#link-to "user" currentUser._id.$oid}}
{{currentUser.name}}
{{/link-to}}
</p>
</div>
</li>
<li>
<div id="settings-cog" class="navbar-header navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-cogs icon-large use-blue"></i>
</a>
<ul class="dropdown-menu">
<li><a data-toggle="modal" data-target="#changePassModal" href="#">Change Password</a></li>
<li><a {{action "toggleEditView" target="base"}} data-toggle="modal" data-target="#editModal" href="#" href="#">Edit Profile</a></li>
<li>Logout</li>
</ul>
</li>
</div>
</li>
</ul>
</div>
</div>
</div>
</nav>
Just create two navbars. On your full-sized navbar add the classes .hidden-sm and .hidden-xs. Then, on your mobile navbar add the classes .visible-xs and .visible-sm. That way, you only see the navbar for the sizes you've designated. For more options, see Responsive utilities.
I have this dropdown menu which works great:
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large"></i> Change Site
<span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList">
<li>
<a href='#'><b>Select a site</b></a>
</li>
<li class="divider"></li>
</ul>
</div>
When the list of dropdown items is longer than the screen, scrolling the mouse wheel will scroll down through the list of items. This is perfect.
However, when I moved the dropdown menu into the nav bar, it stopped working:
<div class="navbar navbar-fixed-top" >
<div class="navbar-inner">
<div class="container">
<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>
<a class="brand" href="http://portal.parworksapi.com/ar/mars/portal/developer">PAR Works</a>
<div class="btn-group pull-left">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-map-marker icon-large" ></i> My Sites <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="arSiteList" style="overflow: scroll;">
<li><a href='#'><b>Select a site</b></a></li>
<li class="divider"></li>
</ul>
</div>
</div>
</div>
The dropdown still opens, but when the list of items is too long it's impossible to scroll through them.
How can I make scrolling work inside the nav bar?
Check all parent elements of your menu on existing "overflow: hidden;" property in CSS