There are a lot of questions surrounding collapsing navbar, but I can't find this specific case, sorry if it's a duplicate anyway.
<div class="navbar navbar-static-top navbar-default container">
<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="/">Brand</a>
</div>
<div class="nav-collapse" id="navbar">
I am trying to have my navbar start collapsed on mobile (on page load). I found it works that way when I add class="collapse" to the #navbar div, but then on PC my navbar is hidden, unless I go to small resolution and toggle it.
Also in this implementation, the first click on collapse button "reopens" opened navbar on mobile.
Your issue is with:
<div class="nav-collapse" id="navbar">
<ul class="nav navbar-nav">
It should be navbar-collapse:
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
Related
I'm working on a project which has multiple links on first page. If a link is clicked application is routed to respective page with some delay. During that delay application shows a loader. But loader is displayed only for the first time I click on a link. It doesn't appear when I go back to first page and then click on a link loader doesn't appear.What may be the reason and how can I solve this problem?? Below is the HTML snippet:
<template>
<!-- MAIN MENU START -->
<require from="bootstrap/css/bootstrap.css"></require>
<nav class="navbar navbar-default topMenu" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<!-- Remove button that appears for xs devices
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#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>-->
<a class="navbar-brand nameEllipsis" id="routeTitle">${router.title}</a>
<!-- Collect the nav links, forms, and other content for toggling
.Remove this div to remove collapse features
.change display of both ul to inline-block so that they appear inline
.float 2nd ul to right to bring li to right and inline
.float 1st li of 2nd ul to left so that it displays according to the format of md and lg devices
<div class="collapse navbar-collapse" id="navbar-collapse-1"> -->
<ul style="display:inline-block;" class="nav navbar-nav navbar-left">
<li ><span class="fa fa-home"></span></li>
</ul>
<ul style="float:right;display:inline-block;" id="navigatingIcons" class="nav navbar-nav navbar-right">
<li style="float:left;" ><span class="fa fa-filter"></span></li>
<li ><span class="fa fa-cog"></span></li>
<li class="loader" show.bind="router.isNavigating">
<i class="fa fa-spinner fa-spin fa-2x"></i>
</li>
</ul>
<!-- </div>--> <!-- /.navbar-collapse -->
</div>
</nav>
<div class="">
<router-view></router-view>
</div>
</template>
Above image when application is being routed for the first time. Also, aurelia-hide class is not present for the first time.
Above image when application is routed after first time, aurelia-hide class is not removed and loader doesn't appear.
Thanks.
So I'm running into an issue with my navbar and media queries. I can get it to switch from regular logo to a smaller logo with no problems. The visible-sm class is giving me issues as for the life of me, I cannot get the text links to the right to reduce the margin forcing the smaller logo up and making the navigation a horror. Did I miss something in the documentation? It seems like something really simple to reduce the rela estate the links are using when hitting the 767px media query. I apologize in advance if this has already been answered I couldn't find a question specific to this issue.
Here be a picture
Here be the Bootply
Here be my HTML
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- 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 visible-xs" href="#"><img src="images/logobug.jpg" alt="" /></a>
<a class="navbar-brand visible-sm" href="#"><img src="images/logosm.jpg" alt=""></a>
<a class="navbar-brand visible-md" href="#"><img src="images/logomd.jpg" alt=""/></a>
<a class="navbar-brand visible-lg" href="#"><img src="images/logolg.jpg" alt=" Logo" /></a>
</a>
</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 pull-right">
<li>HOME</li>
<li> EVENTS</li>
<li>CONTACT US</li>
<li>DIRECTIONS</li>
<li>SPONSERS</li>
<li>VENUES</li>
<li>ABOUT</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Here be my CSS:
.navbar-right {
float: right;
margin-right: -25 px;
}
I think that's what you want , I removed pull right because navbar right do the same
a forked bootply
when the width gets < 768px it show the toggle icon on the right bottom but when I click on it it does not show the list items I defined. can anyone advise me on this? appreciated.
https://jsfiddle.net/fj0u49bj/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a>title</a>
</div>
<div class="collapse navbar-collapse" id="main-nav">
<ul class="nav navbar-nav navbar-right">
<li>
<a>Link2 </a>
</li>
<li>
<a>Log In</a>
<a>Sign Up</a>
</li>
</ul>
</div>
</nav>
I think you are missing to load jQuery. Bootstrap.js is build on top of jQuery which means that can not work without it.
If you do have jQuery (before bootstrap.js) than probably your navigation formatting is not properly done.
Have a look at this fiddle (link in the comment below) so you can see how a correct nav-bar must be.
I've just started learning Boostrap and I'm having a couple of problems with the navigation bar toggle. I've checked up answers from here (like this: Bootstrap 3.0 nav responsive toggle button not working) but I still can't find a solution to what the problem might be.
I'll be glad if someone can help me look into the code and tell me what the problem is. I've linked to the relevant script files (both bootstrap and jquery js files) but I have no with the problem.
here is my code,
<!-- Nav Bar Starts-->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<a class="navbar-brand text-muted" href="#"> eLeanr</a>
<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>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"> Home
</li>
<li> About eLeanr
</li>
<li> Contact
</li>
</ul>
</div>
</div>
</div>
<!-- Nav Bar Ends-->
I am using bootstrap in my website to make it responsive (I will be making a custom design and not use bootstrap's default css). I have created a bootstrap3 navbar but the button which appears after shrinking the viewport does not function as nothing happens when it is clicked.
I have searched for this on stackoverflow and even tried incorporating changes mentioned here. But its not working.
Javascript is enabled in my browser and I have referenced bootstrap.js in my html as well.
My code is as follows:
<div class="navbar navbar-default navbackcolor" role="navigation">
<div class="container">
<div class="comnWdth">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<span class="number">X12 X123 X123</span>
<span class="text">10am-7pm Mon-Sat</span>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li>My Account</li>
<li>Logout</li>
<li>Register</li>
<li>Login</li>
<li>My Cart</li>
</ul>
</div>
</div> <!-- End .comnWdth -->
</div> <!-- End container -->
</div> <!-- End Navbar -->
Also the toggle button and header ("X12 X123 X123 10am-7pm Mon-Sat") is appearing in different rows when collapsed. How can I make them appear in the same row when in a narrow viewport?
Thanks.
As of Bootstrap 3, you should use navbar-right instead of pull-right inside a navabr:
<ul class="nav navbar-nav navbar-right">.
As for your second question, you should probably post it separately, and include your css because there are clearly custom classes there "text" and "number" that we'll need to know to make good suggestions.