I'm trying to use scrollspy for my fixed header nav, and it works correctly when I initially load the page.
However, if I click one of the links in the header to jump to that section, that link that I just clicked will no longer show as active when I scroll around the page past it. All the links behave this way, I don't know why they will work initially but then stop working once clicked.
<body data-spy="scroll" data-target="#myNav">
<header class="navbar navbar-default navbar-fixed-top" 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">Example Brand</a>
</div>
<div id="myNav" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Courses</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<h1 id="home">Home Heading</h1>
...
<div id="course" class="course-header">Courses</div>
...
<h2 id="contact">Contact Us</h2>
Also if I refresh the page, it goes back to working correctly again.
Related
I have created a navbar but it doesn't seem to be responsive. It only works to the extent that the toggle button appears, but nothing happens when clicked. Also, the dropdown menu has no effect. I've tried various solutions mentioned on other posts but nothing seems to be working.
I've included the scripts I've linked to at the end. Please help me identify where it's going wrong
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle 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>
<a class="navbar-brand" href="index.html">GrapeVine</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Areas<b class="caret"></b>
<ul class="dropdown-menu">
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>
</li>
<li>About</li>
</ul>
</div>
</div>
</nav>
<script src="/js/myjQuery.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/bootsrap.min.js" type="text/javascript"></script>
I think your problem is in your script source
replace this
/js/bootsrap.min.js
to
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
You have got "bootsrap" instead of "bootstrap" in your script source:
<script src="/js/bootsrap.min.js" type="text/javascript"></script>
This situation is strange. When I open my website (built on bootstrap) on small screens navbar is visible, but it should be collapse. When I click on button to collapse, it is still visible, when I click second time it is collapse just now. And since that it works good. But when I reload page, I still have this issue.
<div class=container>
<!--MENU-->
<nav style="border-bottom:1px solid #000;">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menu_button" data-toggle="collapse" data-target=".nbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container nbar">
<ul class="nav nav-justified">
<li><a href=#>o nas</a></li>
<li><a href=#>galeria</a></li>
<li><a href=#>blog</a></li>
<li><a href=#>kontakt</a></li>
</ul>
</div>
</nav>
Add the class collapse in classes to your nav element. This way it will still be visible on mobile but the button will work like expected. If you only apply collapse as class and set the aria-expanded to false it will not be visible on mobile (but most likely also not in normal view).
<div class="container nbar collapse in" aria-expanded="true">
<ul class="nav nav-justified">
<!-- li's here -->
</ul>
</div>
I am quite new to bootstrap. I am trying to develop quite a minimalistic site and I only got 3 menu items: my image logo, one link and one button. My menu is collapsing when using mobile which shouldn't be necessary as all three items should fit a small screen. Could someone please help me understand how I can disable the collapse but keep the menu responsive?
This is my code:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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="#"><img src="images/logo.png"/></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Kom igång</li>
<li>
<p class="navbar-btn">
<strong>Kundinlogg</strong>
</p>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Thanks alot in advance!
Jacob
--you should have to remove collapse from
<button type="button" class="navbar-toggle" data-toggle="collapse" data- target=".navbar-collapse">
<div class="collapse navbar-collapse">
or you can use
.navbar-collapse, .navbar-collapse.collapse {
overflow: visible;}
.navbar-toggle {
display: none;}
--also you can check This answer will help you well about disabling collapse and keeping your menu responsive
Prevent menu from collapsing in 768px display CSS media query
The Problem: Navbar STARTS as open. On collapse, the links still show, only the background collapses. I've made sure I'm using transitions and I've got all the bootstrap javascript in there, the bootstrap css and some of my own styling on top, but nothing that I think would affect the navbar.
What it looks like default
What it looks likes closed
My Code:
<body>
<!--Navbar -->
<div class="contactUs">
<p>
<span class="glyphicon glyphicon-phone-alt"></span> 00000000
</p>
</div>
<!-- logo -->
<!-- end logo -->
<!-- Static navbar -->
<div class="navbar navbar-default navbar-static-top" 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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand main-logo pull-left" href="index.html">SX Storage Essex Benfleet</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
Self Storage
</li>
<li>
Business Storage
</li>
<li>
Prices
</li>
<li>
Packaging
</li>
<li>
Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- End navbar -->
Thanks for your help, something was missing from bootstrap css. I just included the CDN. Not sure how that happened, I don't touch the bootstrap css - I'm going to put it down to zombie-mode late night keyboard mashing.
I am new to Bootstrap and am attempting to configure a simple responsive navbar but I have run into an issue.
When I run the code in Chrome it runs just fine and everything looks like it should.
However, when I run the same code in IE or Firefox the collapsed menu gets messed up and appears in the center of the screen rather than starting below the brand.
Here is the code from the body of my program:
<div class="navbar navbar-default navbar-static-top">
<div class="navbar-inner">
<div class="container">
<div class="navbar-brand">
Brand
</div>
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Store</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
I have been following a couple tutorials on Youtube and they all seem to lay it out like this and I always run into the same issue. Is this something that has changed with Bootstrap 3.0.3?
You need to specify a .navbar-header class div around your brand and toggle button, like this:
<div class="navbar-header"> <div class="navbar-brand">Brand</div> <button class="navbar-toggle" type="button" data-target=".navHeaderCollapse" data-toggle="collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button></div>
Demo in jsFiddle
Works Everywhere:
PS: What .navbar-header is doing is adding clear:both after the header so that floated elements will be pushed down.
Since IE and Chrome sometimes treat floats differently, this accounts for the difference.