The collapse option to group the list of options in the navigation bar is not working.
Please check the HTML code and help by giving the solution to it.
I want it to be fully responsive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>TestRank</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toogle="collapse" data-target="#mynavbar">
<!--<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"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
</div>
<div class="navbar-collapse collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="js/bootstrap.min.js"></script>
</body>
</html>
You had a typo at <button type="button" class="navbar-toggle" data-toogle="collapse" data-target="#mynavbar" aria-expanded="false"> where data-toogle="collapse" is wrong what must be data-toggle="collapse"
This is the right code:
<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" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Related
I got a sample code of a navigation bar from w3schools.com. It is using bootstrap. Here is the code:
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
This navbar is working perfectly fine.
But for small screens(case of collapsible navbar) I want the navbar to collapse when I click on an option in it. So, I added data-toggle="collapse" data-target="#myNavbar" in all the <li>. Now the navbar is properly toggling for small screens.
Here is a vid of the issue:
Here is the modified code:
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 1</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
But now, the whole navbar is glitching for large screens(desktop). Please help in resolving this.
Do point out if this is replication, as I am not able to find that.
The final HTML code that is glitching for desktop screens is down below(same problem in google-chrome, firefox, brave):
<html>
<title>Example</title>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a data-toggle="collapse" data-target="#myNavbar" href="#">Home</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 2</a></li>
<li><a data-toggle="collapse" data-target="#myNavbar" href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
</body>
</html>
Click on expand snippet to see the glitch on the desktop screen.
There's a better way to collapse the navbar! Why not include some lines of JS as you are already using jQuery, like this-
$('.navbar-nav>li>a').on('click', function() {
$('.navbar-collapse').collapse('hide');
});
<title>Example</title>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<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="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
</body>
I'm looking for a collapsible navbar. I attempted it with the code below without any success.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon- menu-hamburger"></span></button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You have missed ,
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
within your button tag. Also make sure to add correct bootstrap and Jquery CDNs
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<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 navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I have a navigation bar and when I make the screen size smaller, the list items overlap into the left of the navigation where there is the logo instead of keeping to their positions. Here is the HTML code:
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target="navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
Can someone please point out where I am going wrong or what I am missing. I have the viewport meta tag and the other parts of the page are responsive.
Coppy code below and paste your editor.
You try it work fine.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<header>
<div class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span> <span class="icon-bar"> </span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
<img id="indexlogo" width="20%" alt="logo" src="img/siluxLogo1.png" >
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" >
<li >
<a>hello and welcome</a>
</li>
<li >
<a id="date"></a> <!-- JS which displays date and year -->
</li>
<li >
<a id="feed"></a> <!-- RSS feed ticker -->
</li>
<li class="active">
Home
</li>
<li>
About Us
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</header><!-- end header -->
</body>
</html>
adding an id just before the unordered list would also fix it.
<div id="navbar" class="navbar-collapse collapse">...</div>
and then set data-target="#navbar"
also, you should add this class to your button. class="collapsed"
Here is an example from my own site, which works
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
You also don't need container-fluid
// DROP IN THIS AND TELL ME IF IT WORKS
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top mega navbar-trans navbar-fw">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" 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>
<!-- Navbar Links -->
<div id="navbar" class="navbar-collapse collapse page-scroll navbar-right">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li>About<span class="sr-only"></span></li>
<li>Services<span class="sr-only"></span></li>
<li>Portfolio<span class="sr-only"></span></li>
<li>Pricing<span class="sr-only"></span></li>
<li>Contact<span class="sr-only"></span></li>
</ul>
</div>
</nav>
I have a very simple page which is made of a navigation bar and some buttons. However, these buttons are not showing when I visit the page using a mobile device.
I have checked several threads such as this and this this, but I can't see where is my problem.
Fiddle link
Code:
<!DOCTYPE html>
<html>
<head>
<title>Flask Template Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.container {
max-width: 1400px;
padding-top: 100px;
}
h2 {color: #55acee;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Test</li>
<li>Endpoints</li>
<li>Information</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!--<h2>This is part of my base template</h2>-->
<br>
<h2>Hello</h2>
<br>
<!--<h2>This is part of my base template</h2>-->
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Thanks
You forgot to include to code that shows the collapsible navbar menu:
replace:
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
</div>
with:
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
<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>
</div>
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.