Why doesn't the bootstrap navbar mobile menu appear? - html

Question

I have two questions. The first and the most important is how to make the menu in the minified version to appear. And the second thing I want is for the navbar to stay on the top when I scroll down and to turn black from transparent that it is now.
The Code is:
<nav class="navbar-inner navbar-inverse">
<div class="container">
<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>
<a class="navbar-brand" href="#">Cosmos</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
and the css is:
.navbar-inner {
background: transparent;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
You can also check the codepen page of the project:
https://codepen.io/georgekech/pen/ZLNMGE

Answer 1

Answer to both your questions:
While using bootstrap responsiveness is already handled. If provided the right markup on your HTML, bootstrap will take care of the menu on mobile view. Hence when you resize down to the mobile view, there would be a "hamburger menu" on the right of your navbar which toggles your menu options.
Next, If you want your header to stay on the top when you scroll down. Bootstrap already provides it. You just have to replace the class navbar-inverse with navbar-fixed-top on your <nav>. Also importantly remove the unnecessary position: absolute properties given to the navbar-inner
.navbar-inner {
background: transparent;
position: absolute; //remove
top: 0; //remove
right: 0; //remove
left: 0; //remove
z-index: 1;
}
Next, to change the background of the navbar when you scroll you need to add 2 simple changes, one to your JavaScript(using JQuery) another to your CSS, these 2 changes going hand in hand.
JQuery:
$(function () {
$(document).scroll(function () {
var $nav = $(".navbar-fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
CSS:
.navbar-fixed-top.scrolled {
background: black;
}
The Jquery will basically add/remove(toggle) a class to your navbar when you scroll more than the height of the navbar. Ofcourse the CSS is to just add the background color when the class is added from the JQuery.
Your codepen here
Note:
Obviously don't forget to include the JQuery library for the JavaScript to work, alternatively you can do the same using plain JavaScript.
If you do include JQuery, since you're using Bootstrap v3.3.6, JQuery version needs to be higher than 1.9.1 but also lower than 3. All of which you can find here
Done deal !

Answer 2

Try Following Code
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>
<!-- Bootstrap Navigation Start -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Cosmos</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div>
<ul id="menu-hover" class="nav navbar-nav">
<li>Home</li>
<li>Public Service</li>
<li>Idea SubMission</li>
<li>Power Division</li>
</ul>
</div>
</div>
</div> <!-- End Navbar Collapse -->
</nav>
<!--End Bootstrap Navigation

Answer 3

.navbar-inner {
background: transparent;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1;
}
.navbar-inner position fixed will make your menu stable even if you will scroll down.
To change menu color on scroll, please check this answer of this menu background change color on scroll.

Answer 4

You need to use the same name used as the data-target in the button as the id of the div for the menu. In this case, it is "bs-example-navbar-collapse-1"
So add id="bs-example-navbar-collapse-1 to the div class="collapse navbar-collapse"
For the navbar, you don't need to use CSS if you are using bootstrap for what you want. Add the class of "navbar-fixed-top" to the nav element.
When you do use this class, you will need to add body {padding-bottom: 70px; }. This will push the content of your page to be under your navbar. 70px works with your example but change it as you see fit.