Bootstrap navbar grid system for unordered list - twitter-bootstrap-3

Can anyone help me please how to make the unordered list display in grid widths ?
<div class="navbar" role="navigation">
<div class="container">
<div class="row">
<div class="navbar-header col-md-4">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#topmenu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a rel="home" class="logo" href="{$baseUri}">
<img src="img/layout/portfolio-2014-logo.png" alt="" class="img-responsive logo" />
</a>
</div>
<div class="navbar-collapse collapse" id="topmenu">
<ul class="nav navbar-nav">
<li class="active">blog</li>
<li class="col-md-2">works</li>
<li class="col-md-2">about</li>
<li class="col-md-2">contact</li>
</ul>
</div>
</div>
</div>
<div class="container">
<hr>
</div>
</div>
I've tried something like this but it is not workiing :/

Well that's not part of default Bootstrap in the navbar because navbar-nav does it's own width based on the width of the text and the padding, but you can just remove the navbar-nav and just use nav:
DEMO: http://jsbin.com/kiyiye/1/
<ul class="nav">
And it will work with col-*-classes but you'll need to likely address the smaller viewport margins and such. Get intimately familiar with Bootstrap's css if you decide to use something never demonstrated in their docs.

Related

Bootstrap navbar collapses fine but won't display on larger screen

My code was working fine, but I decided to add a hamburger button, and now I have an issue.
The button works fine, but when my screen is larger than the breakpoint, I have no navigation showing on my screen. I'm sure it is a matter of missing a tag or something, but I can't see it and could use some help. I have jQuery and Bootstrap 3 and CSS loaded.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target="#collapsemenu" aria-expanded="false">
<span class="src-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">LORI</a>
</div>
<div class="collapse navbar collapse" id="collapsemenu">
<ul class="nav navbar-nav">
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
Try this. this code works
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Lori</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>

bootstrap 3 navbar not collapsing on mobile

i put a collapsing navbar on my website.
the problem is that on mobile the navbar isnt collapsing
what is the problem?
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#main"><?php bloginfo ('name') ?></a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>צור קשר</li>
<li>פרויקטים</li>
<li>שירותים</li>
<li>אודות</li>
<li>ראשי</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
In your code a <ul><li> added mistake.
Delete it.
Then your code is working properly.

Bootstrap 3.2: menu button appears on resize but doesn't show the links

I'm using the Default NavBar of Bootstrap 3.2. The collapse is working when the window is resized down, but the button is not displaying the links when cliked. This is what I have until now:
<body>
<div class="mainHeader">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<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="#">Bootstrap Test</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>enlace1</li>
<li>enlace2</li>
<li>enlace3</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
Any idea? Thanks in advance.
you have to verify your tags you have an additional DIV, i've tried it on bootply.com its working fine
<body>
<div class="mainHeader">
<div class="container">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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="#">Bootstrap Test</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>enlace1</li>
<li>enlace2</li>
<li>enlace3</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
UPDATE
you have to consider adding <div class="container"> under the nav tag, like the updated code !
UPDATE 2
you have to check the jQuery minimum version required by bootstrap3 check this link

right navigation bar bootstrap does not collapse

I am using Bootstrap 3, i am using top navigation bar and left side navigation bar, i want that it should work fine for mobile also, when i collapse the page from right to left then my top navigation works fine and both buttons appears but my left side navigation does not disappear, it appears and disappear on button click.
This is jsfiddle
This is the code:
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="col-md-2 col-sm-2 col-lg-2" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Instead of using just
<ul class="nav">
for the left elements use:
<ul class="nav navbar-nav navbar-left">
Fiddle: http://jsfiddle.net/FDkqT/
That fixes all your problems

two bootstrap menu collapse issue on large screen

I have top menu and left menu on page, I want that both should collapse on small screen, these are working fine for small but on large screen both menu don't display.
<!-- Fixed navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container nav-main">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#first">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#sidebar" role="complementary" >
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="navbar-brand">Business Name Test </span>
</div>
<div class="nav-collapse collapse" id="first">
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-cog"></span> Settings
</li>
<li>
<span class="glyphicon glyphicon-question-sign"></span> Help
</li>
<li>
<span class="glyphicon glyphicon-log-out"></span> Logout
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container main">
<div class="row">
<div class="nav-collapse collapse" id="sidebar" role="complementary" >
<div class="m-sidebar">
<ul class="nav">
<li>Link1</li>
<li class="divider"></li>
<li>Link2</li>
<li>Link3</li>
<li class="divider"></li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
</ul>
</div>
</div>
<div class="col-md-10 col-sm-10 col-lg-10">
<div class="page-header">
<h1>Home Page</h1>
</div>
</div>
</div>
</div><!-- /container -->
Here is Fiddle
Please guide me what is wrong I am doing?
In order to correct the position of the links, i changed the order of the navbar elements, first the left side, then the right side ( it was not the problem, its a matter of organization). Added a division between the nav & the page title. Changed the class of the navbar items on the left to :
<ul class="nav navbar-nav navbar-left">
Instead of just
<ul class="nav">
Here is the Final Jsfiddle: http://jsfiddle.net/FDkqT/
I know its simple, but if you expand the window you will see that it works just right