Bootstrap navbar toggle button is not functioning - html

When the page is reduced to tablet/mobile size, the toggle button is displayed but does not work. Here is the html
<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-nav-demo" 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>
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span> IMGS
</div>
<div class="collapse navbar-collapse" id="bs-nav-demo">
<ul class="nav navbar-nav">
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
....
....
<script type="text/javascript" href="https://code.jquery.com/jquery-2.2.1.js"></script>
<script type="text/javascript" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
It does include the required js links.

So I found the issue; it is very slight. The href attribute should be replaced with a src attribute on script tags. Sublime Text's tab press for script defaults an href.
<script src="https://code.jquery.com/jquery-2.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Related

e.preventDefault will block anchor tag after clicking on li

hello friends my project header and footer part is different & i want to make page link active in header on click of each page link. Code is working, but, due to e.preventDefault(), the anchor tag is not working and if it is removed, the active class is added to li. What is solution to handle this situation?
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header navbar-left">
<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>
<!-- <h1><a class="navbar-brand" href="home.php"> <span>L</span>ifer</a></h1> -->
<span><img src="images/sv_logo.webp" class="navbar-brand" alt="digital-marketing-logo" ><!-- The Inside Story 100*180--></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<!-- <li>Blog</li>
<li class="dropdown">
Services<b class="caret"></b>
<ul class="dropdown-menu agile_short_dropdown">
<li>Web Icons</li>
<li>Typography</li>
</ul>
</li> -->
<li>
Contact Us
</li>
</ul>
</nav>
</div>
</nav>
jQuery:
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click', 'li', function() {
e.preventDefault();
$(this).closest("ul").find("li").removeClass("active");
$(this).addClass("active");
});
});
</script>
Ignore my comment, you could target the anchor tags in your CSS like this:
$(document).ready(function() {
$(document).on('click', 'li', function(e) {
e.preventDefault();
$(this).closest("ul").find("li").removeClass("active");
$(this).addClass("active");
});
});
.active a {
color: red;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-default">
<div class="navbar-header navbar-left">
<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>
<span><img src="images/sv_logo.webp" class="navbar-brand" alt="digital-marketing-logo" ><!-- The Inside Story 100*180--></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<nav class="link-effect-2" id="link-effect-2">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>
Contact Us
</li>
</ul>
</nav>
</div>
</nav>

#media for drop down menu - show menu

I want to have my site responsive to different screen sizes. At the moment I am testing my site at a width of 765px (and lower). What I would like to happen is for the menu to appear when I click the three bars, but nothing happens. No menu appears, just the 'brand name'.
I am using the bootstrap navigation for my menu.
This is a screenshot of the page (edited):
The Jquery code: - external file
#media screen and (min-width: 280px) and (max-width: 765px){
/* code goes here */
.primary {
color: orange !important;
font-size: 14px;
}
}
The color change is for testing sizes.
The HTML: - navigation only
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>
What have I missed?
How I can I solve my issue?
Any help would be appreciated.
Thanks
One of the reasons would be messing up the order of jQuery and bootstrap.js. Bootstrap requires jQuery in order to run some events. So make sure your jquery script is before bootstrap.min.js or bootstrap.js.
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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-header">
<a class="navbar-brand" href="index.php"><span class="primary">#</span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
<li>Privacy</li>
<li>Terms</li>
<li>Copyright</li>
</ul>
</div><!-- navbar collapse -->
</div>
</nav>

Bootstrap's collapsible navbar

My Bootstrap collapsible menu isn't working. I can't figure out where is my problem?
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<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>
</div>
<div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right" data-toggle="collapse" data-target="myNavbar">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
You have duplicate attributes for class in multiple divs as well as multiple data-toggle="collapse" & data-target="myNavbar".
Also your target ID has the # in it, it should not: id="#myNavbar" should be id="myNavbar"
Validate your HTML and refer to the refer to the Docs
Working Example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#top">the company</a>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="myNavbar" class="collapse navbar-collapse menu">
<ul class="nav navbar-nav navbar-right">
<li class="active scrollable">About me
</li>
<li class="scrollable">Portfolio
</li>
<li class="scrollable">Contact Me
</li>
</ul>
</div>
</div>
</nav>
<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>
The problem was with:
Your collapse navbar hierarchy.
The div where you used menu class.
Syntax
The anchor tag: <a class="navbar-brand" href="#top">the company</a> should come after button tag.
And the menu class should be used along with other classes: <div id="myNavbar" class="menu collapse navbar-collapse">, instead of <div class="menu" id="#myNavbar" class="collapse navbar-collapse">
<div id="#myNavbar" should be changed to <div id="myNavbar". Remove the #, you don't need it while adding id to the div.
And final issue: Don't use data-toggle="collapse" data-target="myNavbar"> again in the ul tag. Just use <ul class="nav navbar-nav navbar-right">
Try running the code snippet below and don't forget to include Bootstrap and jQuery libraries in your webpage. Cheers!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<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="#top">the company</a>
</div>
<div id="myNavbar" class="menu collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scrollable">About me</li>
<li class="scrollable">Portfolio</li>
<li class="scrollable">Contact Me</li>
</ul>
</div>
</div>
</nav>
<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>

My bootstrap 3 responsive navbar doesn't collapse.

I just started this project but I just can't get the navbar right. Read every same question on stack but I can't figure it out. Tried the jquery everywhere and screened my code now about a 100 times.
<title>Dit is Bas</title>
<meta name "viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link type="css/bootstrap.min" rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="javascript/bootstrap.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="collapse 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">Bas</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Photo's</li>
<li>About Bas</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</header>
</body>
Hopefully somebody will see the problem.
Thanks in advance!
The problem lies in data-target="collapse navbar-collapse" which should be id of div that has items of menu. For transitions to work in Bootstrap you need jquery.js before bootstrap.js.
You should have something like this to have working navbar.
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#important-id-for-collapsing" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="important-id-for-collapsing">
<ul class="nav navbar-nav">
<li>Link #1</li>
<li>Link #2</li>
<li>Link #3</li>
</ul>
</div>
</div>
</nav>
Here's a link to JSFiddle.

Bootstrap Collapsing Navbar goes wrong on Chrome for Android

I'm using Bootstrap and I have a problem with the collapsing Navbar, it shows wrong on Chrome for Android, I tried stock navbar's without modifying and still happens (www.tasqueo.com)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Yes Drip is correct,
So I came to understand one thing.
we have to use https for secured links especially for maxcdn.bootstrapcdn.com
or
If you give http:// in this code the output is coming like above.
MY CODE:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>