I want to get my navigation to collapse down although it goes down but when I click the button again to go back up it does not work.
<div class="menu-btn-respons-container">
<button id="menu-btn" type="button" class="navbar-toggle btn-navbar collapsed" data-toggle="collapse" data-target="#main-menu .navbar-collapse">
<span aria-hidden="true" class="icon_menu hamb-mob-icon"></span>
</button>
</div>
<div id="main-menu" class="font-raleway">
<div class="navbar navbar-default" role="navigation">
<nav class="collapse collapsing navbar-collapse right-1024">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</nav>
</div>
</div>
Related
I can't seem to figure out why the sticky-top function is not working. I got around the issue by writing some horrid looking javascript code but was hoping someone might have an idea.
I just want it to stick to the top of the screen as I scroll over some other element on the page at 50px.
The navbar looks and works as intended (as shown in the picture) but this might be a PEBCAK situation...
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-default navbar-fixed-top" id="secondNav">
<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="#">Portfolio</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li>Section 4</li>
</ul>
</div>
</div>
</div>
</nav>
Instead of using navbar-fixed-top try just fixed-top. Let me know if this helps.
I'm having a hard time figuring out how I can implement bootstrap 3 menu in a way such that it's right-floated and part of it collapse, e.g.:
Brand Item 1 Item 2 Item 3 Item 4
when collapsed look that way:
Brand Item 4 [Toggle menu]
I think I'm getting close, but can't make it work properly:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".menu-collapse">
<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="#">Brand</a>
</div>
<div class="navbar-right">
<div class="collapse navbar-collapse menu-collapse">
<ul class="nav navbar-nav">
<li>Test right-middle</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li>Test right-most</li>
</ul>
</div>
Any ideas how I can fix "test right-most" not to get pushed to next line?
Include a separate navbar-header for the non-collapsible item
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
BRAND
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<li class="navbar-text pull-left">Item 3</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>
<!-- 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>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</nav>
JSFIDDLE
Try to place the contents inside of a div with the class: navbar-header
So instead of declaring:
<div class="navbar-right">
Use the following class instead:
<div class="navbar-header pull-right">
I have a collapsable navbar in bootstrap that is not showing correctly when collapsed. I am moving the navbar-header (which contains a navbar-brand) to the right side with pull-right. However, adding this in seems to make the navbar that is toggled sit between the toggle button and the navbar-brand.
I would like the toggled navbar to sit below the button and the brand whenever it is open.
This is the correctly formatted version, however, the Brand is not pulled over to the right
This is what is happening when I pull the Brand over
Here is the code I am using. Bootstrap version is 3.3.6
<nav class="navbar navbar-default">
<div class="container">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header pull-right">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
.pos-rel{ position:relative;}
.navbar-brand{position:absolute; right:0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container pos-rel">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
Try this
Try this below code:
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target="#myNavbar">
<span class="glyphicon glyphicon-th-list"></span>
</button>
<div class="pull-right" id="mobile-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
<div class="pull-right" id="com-nav">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<script type="text/javascript">
$(document).ready(function () {
setNavbarBrand();
});
$(window ).resize(function () {
setNavbarBrand();
});
function setNavbarBrand() {
if (window.innerWidth <= 768) {
$('#mobile-nav').show();
$('#com-nav').hide();
} else {
$('#mobile-nav').hide();
$('#com-nav').show();
}
}
</script>
</body>
I've been working on a navbar for a site, I've got it sizing down correctly but when it turns into the responsive bar (collapsing the links into the dropdown list) I cant get the collapsible menu to show up. The list button with the 3 bars and my hidden navbar-brand show up but I can't get the menu to drop down. Any ideas?
Code:
<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
<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="fa fa-bars"></span>
</button>
<a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> Brand <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
Are you also loading bootstrap.js or collapse.js + transitions.js? The nav collapse won't work without them, as noted in the docs: http://getbootstrap.com/components/#requires-javascript-plugin
I am allowed to make some changes on your code to get things fixed
<div class="container">
<div class="navbar-default navbar-fixed-top head-navigation" role="navigation">
<div class="container">
<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="fa fa-bars"></span>
</button>
<a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> Brand <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav nav-justified">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
Here a jsbin link to it : http://jsbin.com/disasusuri/2/
ps : I am using the last version of bootstrap
data-target should point to an id not a class so instead of data-target=".navbar-collapse", use data-target="#someID" then add an id to the div that will be collapsing, <div class="navbar-collapse collapse" id="someID">
working bootply link
<div class="navbar navbar-fixed-top head-navigation" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#someID">
<span class="sr-only">Toggle Navigation</span>
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand brand-hidden" href="#"><i class="fa fa-circle"></i> Brand <i class="fa fa-circle"></i></a>
</div>
<div class="navbar-collapse collapse" id="someID">
<ul class="nav nav-justified">
<li>Item 1</li>
<li>Item 2</li>
<li><a class="img-logo" href="#"><img id="main-logo" src="img/logo.png"></a></li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div></div>
The page has a vertical sidemenu. It works fine when the page is maximized. When minimized i would like it to show/hide on click on the toggle icon, but nothing happens. The menu just doesnt show in my case.
(But here in the fiddle, it flashes though).
Where am i going wrong.
http://jsfiddle.net/rk74g6w0/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid navbar-container">
<div class="navbar-header"> <a class="navbar-brand" href="#">DS-Menu</a>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-collapse">
<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>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-lg-2">
<div class="sidebar-collapse collapse col-sm-3 col-md-2
sidebar navbar-default navbar-static-side">
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
<li class="active mainmenu"><a href="#">Menu 0 <span
class="glyphicon arrow"></span></a>
<ul class="submenu">
<li>item 0.1
</li>
<li>item 0.2
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="col-lg-10"></div>
</div>
</div>
Replace this:
<ul id="menu" class="nav nav-sidebar sidebar-collapse in">
By this:
<ul id="menu" class="nav nav-sidebar">
JSFiddle: http://jsfiddle.net/rk74g6w0/1/