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/
Related
I have a bootstrap nav bar. In which i have multiple drop-down items.
Now I have another div col-md-3.
In this div I want show the items of the dropdown which I hover. For now if i hover over a dropdown then the submenu is showed instead of clicking.
So how can I show the sub items of a drodown menu in that div ?
I want that subitems are in drop-down and also in that side bar div.
My Code is like this:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>Dashboard</li>
<li class="dropdown">
Administration <span class="caret"></span>
<ul class="dropdown-menu">
<li>Time Zone</li>
<li>Holidays</li>
<li>Working Hours</li>
<li> Promt Language</li>
<li>Phone No Allocation & Extensions</li>
<li>Speed Dial</li>
<li>Confernce Welcome Message</li>
</ul>
</li>
<li class="dropdown">Dial Plan<span class="caret"></span>
<ul class="dropdown-menu">
<li>Current Dial Plan</li>
<li>Caller ID Management</li>
<li>ISD Management</li>
<li>Block Number</li>
<li>Override</li>
<li>Location</li>
</ul>
</li>
<li class="dropdown">Routing<span class="caret"></span>
<ul class="dropdown-menu">
<li>24 Hours</li>
<li>Working Hours</li>
<li>OFF Hours</li>
<li> Location Based Routing </li>
</ul>
</li>
<li>Call Recording</li>
<li class="dropdown">
Users <span class="caret"></span>
<ul class="dropdown-menu">
<li>Add User</li>
<li>View Users</li>
</ul>
</li>
<li class="dropdown">
Voice Mail<span class="caret"></span>
<ul class="dropdown-menu">
<li>Default</li>
<li>For each user</li>
</ul>
</li>
<li class="dropdown">
Provisioning <span class="caret"></span>
<ul class="dropdown-menu">
<li>Manual Softphone Configuration</li>
<li>Add Deskphone</li>
<li>Devices</li>
<li>Edit</li>
<li>Delete</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="col-md-12" >
<!-- Side bar-->
<div class="col-md-3">
</div>
</div>
</div>
Your code is correct, however it seems you forgot to include jQuery in your code.
I created a Codepen using your code and I've included jQuery.js at the bottom just before including the Bootstrap library.
As you can see the dropdown items work fine and, as you remove the jQuery script from the code, you can reproduce your broken scenario.
Here is the link: Codepen Link
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
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'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
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>