Anyone know why my page is loading with the navbar pre toggled down by looking at this code?
The navbar loads extended, but then a click on the toggle button "refreshes" it into the extended position. A second click then retracts the navbar to the position I would like it initialized in.
<div class="nav-gradient">
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<!-- 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">
<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="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right navbar-right-matt">
<li class="dropdown">
<?=_('Websites')?><b class="caret"></b>
<ul class="dropdown-menu">
Add the class of collapse to your .navbar-collapse like so:
<div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1">
Related
I'm trying to build a navbar with bootstrap. My navbar should have two elements:
Close-icon on the left side of the bar
Label element on the right side of the bar, but it should be placed left to the menu-icon (which is shown on small devices). If there is no menu-icon, the label element should be just on the right side of the bar
This is what I tried so far:
JSFiddle: http://jsfiddle.net/0jejx693/1/
<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" 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>
<ul class="nav navbar-nav nav-pills navbar-right">
<li><a class="navbar-brand"><i class="fa fa-power-off"></i></a></li>
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
So the result should look like this:
small
| [icon] [lable] [menu] |
big
| [icon] [lable] |
Updated fiddle. Hmm, sry cause I deleted "label" class from span, but it was not showing the "fa" icon. So, was only for test. And, there's a label left to toggle-menu. I think that's what you want, am I right?
http://jsfiddle.net/kqemk0zk/
.label-cont{
position: absolute!important; /*Important used only to example. Could be overrated with hierarchy*/
right: 60px;
}
Something like this?
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top affix-top">
<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">
<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 page-scroll" href="#page-top"><i class="fa fa-power-off"></i></a>
</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 navbar-right">
<li>
<a href="/link">
<span class="label"><i class="fa fa-commenting"></i> 10</span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I am using bootstrap, and now I have this HTML code for Navbar
<nav class="navbar navbar-default">
<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 class="navbar-brand">Menu</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Index", "Index", "Home")</li>
<li>#Html.ActionLink("Contacts", "Contacts", "Home")</li>
</ul>
</div>
</nav>
Now I would like to add there a SearchBox with the Search-icon, which will be on the right side of the nav bar, but when the navbar is "packed" into Hamburger button, I would like this Search Box to be "packed" into Search-icon-button, which would appear right-side from Hamburger button.
I am having a bit of trouble with my top fixed collapsible bootstrap navbar.
Whenever I click on a link of my navigation bar, a strange horizontal bar that looks like a horizontal scrollbar appears above the navbar and then disappears instantly.
I tried removing all my JS , CSS, and the rest of the page leaving only the navbar, and the bug is still there, so I assume it is something about the syntax of that navbar.
Below is the code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Proyecto</li>
<li>Galería</li>
<li>Planos</li>
<li>Ubicación</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(0000) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.
Thank you very much for your assistance
EDIT: I found that the problem is on making the navbar collapsible. If I remove the data attributes from the li elements, this problem is gone, but on mobile when I touch on some link the navbar doesnt collapse back.
There is a known bug in bootstrap, according to this post :
Bootstrap 3 nav dropdown
You have to add some CSS to fix it :
.navbar-collapse.in {
overflow-y: visible;
}
This a demo page you need to modify as you needs..DEMO Page
HTML part
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">My Application</a>
</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>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
</div></nav>
I found the solution to my problem.
The solution was adding .in class to the data-target attribute of the li elements on the navbar.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar.in">Home</li>
<li data-toggle="collapse" data-target="#navbar.in">Proyecto</li>
<li data-toggle="collapse" data-target="#navbar.in">Galería</li>
<li data-toggle="collapse" data-target="#navbar.in">Planos</li>
<li data-toggle="collapse" data-target="#navbar.in">Ubicación</li>
<li data-toggle="collapse" data-target="#navbar.in">Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Maxime Mettley's comment helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.
This question already has answers here:
Hide Twitter Bootstrap nav collapse on click
(31 answers)
Closed 4 years ago.
I'm using bootstraps nav bar.When a user clicks on a nav-bar button, the nav bar stays open. How to collapse the nav bar when a nav-bar button is clicked?.
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a data-toggle="tab" href="#sectionA">Page1</a></li>
<li><a data-toggle="tab" href="#sectionB">Page2</a></li>
<li><a data-toggle="tab" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Screenshot:
This is how it is after clicking on a nav-bar button (menu stays open):
This is how I want it to be after clicking on a nav-bar button (back to original state):
I have two solutions for this:
First option: data-toggle attribute
You can add the following attributes to the anchors data-toggle="collapse" data-target=".in"
This way, menu will collapse when a menu item is selected.
Here's your code:
<nav class="navbar navbar-default" role="navigation">
<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>
<a class="navbar-brand">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<!-- Add data-toggle="collapse" data-target=".in" to <a> elements-->
<!-- This way they will collapse the responsive menu when clicked -->
<li class="active"><a data-toggle="collapse" data-target=".in" href="#sectionA">Page1</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionB">Page2</a></li>
<li><a data-toggle="collapse" data-target=".in" href="#sectionC">Page3</a></li>
</ul>
</div>
</div>
</nav>
Example: http://jsfiddle.net/Frondor/sey4wsah/
2nd alternative option: using jQuery (best method)
If the first example isn't working for you, you can just add a few lines of jQuery below jQuery and Bootstrap.js library calls, don't forget about the jquery.js and Bootstrap.js API:
<script src="/js/jquery.min.js"> <!--suppose these are the same paths you're using for it -->
<script src="/js/bootstrap.min.js">
And below:
<script>
$(document).ready(function () {
$("nav").find("li").on("click", "a", function () {
$('.navbar-collapse.in').collapse('hide');
});
});
</script>
This will match every link on your responsive menu, and collapse said menu at click event.
Give it a try
Keep your bootstrap.min.js file into js folder and add this <script src="js/bootstrap.min.js"></script> before </body> and keep your bootstrap.min.css into css folder and add this <link rel="stylesheet" href="css/bootstrap.min.css"> before </head> .
Given this menu code from a boostrap template, I want each menu item to both stack and take up the full width when the screen size is detected to be small. Essentially, identical functionality to when the "triple bar" menu button is hit, except the user does not have to manually press it.
Thanks in advance.
<!-- Static navbar -->
<div class="navbar navbar-default">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div><!--/.nav-collapse -->
</div>
What I understand is you wanted to make all menu items visible by default without users having to click on triple line (hamburger) menu and all menu items should be stacked horizontally on smaller screen.
Your code above is fine. Just add a class "in" to the navbar-collapse div and all set.
<div class="navbar navbar-default">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse in">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is demo: http://jsfiddle.net/shekhardesigner/35gSz/