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.
Related
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>
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>
I have a bootstrap 3 collapse menu.
It looks like this in iphone:
Here is the code:
<div class="navbar navbar-fixed-top visible-phone">
<div class="navbar-inner">
<div class="container">
<!--Button to collapse the Navigation-->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<img src="images/expand-menu-button.png"></a>
<div class="nav-collapse collapse">
<ul class="nav nav-justified">
<li>Velkommen</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle"
data-toggle="dropdown">
<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="Personale"</a></li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But I need to show normal menu in ipad and desktop. Now this menu button applying for ipad and desktop as well. How can I overcome that issue?
Take a look at this, maybe it'll help. If you scale it in your desktop window it'll appropriately jump to mobile display when necessary.
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="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>
Welcome
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>Link 1</li>
<li>Link 2</li>
</ul>
</div>
</nav>
I believe the problem is in your navbar class. You are missing role="navigation" which makes the navbar accessible from different devices and sizes. You should not need the visible-phone either.
Change:
<div class="navbar navbar-fixed-top visible-phone">
To:
<div class="navbar navbar-fixed-top visible-phone" role="navigation">
Another problem may be fixed by changing:
<div class="nav-collapse collapse">
To:
<div class="collapse navbar-collapse">
Possibly you're missing the viewport meta tag that's used to enable responsiveness, as mentioned in the Bootstrap docs?:
<meta name="viewport" content="width=device-width, initial-scale=1">