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>
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 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 new in bootstrap.
I'm trying to configure my menu bar. I added this line of code into my header:
<meta name="viewport" content="width=device-width, initial-scale=1">
After that, I added this block of code in my view:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inicio <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Opcion 1</li>
<li>Opcion 2</li>
<li>Opcion 3</li>
</ul>
</li>
<li>Pagina 2</li>
<li>Pagina 3</li>
</ul>
</div>
</nav>
This is what I want:
This is what I'm getting:
I want all items horizontally, not vertically...
Maybe this is very basic, but this is the first time that I'm using bootstrap.
Could you help me, please?
You are missing a few things in your code
See a basic demo from bootstrap itself here
Take a look at navbar docs
Here is a simple working snippet base on your code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">WebSiteName</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Inicio <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Opcion 1
</li>
<li>Opcion 2
</li>
<li>Opcion 3
</li>
</ul>
</li>
<li>Pagina 2
</li>
<li>Pagina 3
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>
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'm using the animate.css framework to handle cool animations for the web application I'm building, but I'm having z-index issues when it comes to displaying my content. (I should also note that I'm using the Twitter Bootstrap framework as well.)
As an example, if I have a menu, and then a panel that displays right below it, the drop downs of the menu will be displayed behind the panel, when in reality, I want them to display in front. Here is a basic JSFiddle example of the problem I'm having.
Here is the HTML of that example.
<div class="container">
<div class="animated fadeInLeft">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Drop Down 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Element 1</li>
<li>Element 2</li>
</ul>
</li>
<li class="dropdown">
Drop Down 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Element 1</li>
<li>Element 2</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="animated fadeInLeft">
<div class="panel panel-primary">
<div class="panel panel-header">
My Panel
</div>
</div>
</div>
I'm applying the "animated" class to both the panel and menu separately (on purpose because in my application, the menu will be loaded in once, while a different panel could be loaded in), but when I remove the class from one of them, it works perfectly. In other words, if ONLY one of the elements have the "animated" class, it works. If they both have the "animated" class, it doesn't.
Does anyone have an idea on how I could fix this?
Thanks.
Remove the unnecessary divs and attach the animation classes directly to the elements themselves. Then you can set the z-index as desired.
I suspect your problem may have been caused by the opacity change in the animation, but I'm not too sure about that.
Working Example
.panel {
z-index: 1
}
nav {
z-index:2
}
<div class="container">
<nav class="navbar navbar-default animated fadeInLeft"> <!-- see change -->
<div class="container-fluid">
<div class="navbar-header">
<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="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home
</li>
<li class="dropdown"> Drop Down 1<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Element 1
</li>
<li>Element 2
</li>
</ul>
</li>
<li class="dropdown"> Drop Down 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Element 1
</li>
<li>Element 2
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="panel panel-primary animated fadeInLeft"> <!-- see change -->
<div class="panel panel-header">My Panel</div>
</div>
</div>