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-->
Related
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
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
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">
I am new to bootstrap and am trying to learn it using the excellent W3schools website. I am basing my page on http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp. I have tried changing the hrefs in the navbar to offpage links but nothing works. I click the menu and nothing happens. Onpage links work fine.
How do i do offpage links?
TIA
Sample code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Home<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>example</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Can you please post the snippet of the navbar code in question.
My guess are you are not adding http to the href of the navbar. Try something like the on below:
<a href='http://example.com'>example</a>
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.