Bootstrap navbar glitching while trying to make it collapsible

Bootstrap navbar glitching while trying to make it collapsible - html

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>

Related

Having an issue with changing the background color on a navbar.

I am currently working on a band page and having issues with the navbar. I want the navbar to be black to match the logo of the band, but can't seem to change the background color despite trying it with all of the relevant classes on my css page.
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="index_thekatellas.html">
<img src="katellas.jpg">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Tour Dates</li>
<li>Band</li>
<li>Music</li>
</ul>
</nav>

You should use
<nav class="navbar navbar-inverse">
It will look your nav bar black.
default is white so inverse is black.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My exam</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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>

why collapse option under navigation bar not working in bootstrap3?

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>

Li tags in Navigation Bar is not Responsive

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>

Centering logo-image and put the responsive navbar right under the logo

<nav id="navbar-custom" 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="#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>
<a class="navbar-brand" href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav mynavbar">
<li><a id="menu_link" href="GIỚI THIỆU.html">GIỚI THIỆU</a></li>
<li><a id="menu_link" href="#EVAALUTION">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</a></li>
</ul>
</div><!--/.nav-collapse -->
I am stuck on making a responsive pronunciation-teaching website with logo right on in the top-middle of the page and put the menu right beneath the logo. How I can do that with bootstrap?
all i want is make my web as the photo

It's best that your learn CSS in general before hopping into Twitter Bootstrap.
Also, please post a jsfiddle or jsbin of your code.
You could center it simply with:
.logo {
margin: 0 auto;
}
Otherwise you can use the Bootstrap grid system to pseudo-center the logo.

Just a class logo and add following css to that class
.logo{margin: 0 auto;}
To learn CSS log on to site

Wrap your logo within col-xs-12 so it will take the full width of your navbar container - you can pull it left/right/center it within later on:
<div class='col-xs-12'><a class="navbar-brand" href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a></div>
I'm not really sure if this is what you want to achieve but there you go.

i have used class extra small with logo
<!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="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>
<style>
</style>
</head>
<body>
<nav id="navbar-custom" 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="#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>
<div class="col-xs-12"> <a class="navbar-brand " href="GIỚI THIỆU.HTML"><img src="logo.png" alt="logo-Image"></a></div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav mynavbar">
<li><a id="menu_link" href="GIỚI THIỆU.html">GIỚI THIỆU</a></li>
<li><a id="menu_link" href="#EVAALUTION">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</a></li>
</ul>
</div><!--/.nav-collapse -->
</body>
</html>

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.

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Bootstrap navbar glitching while trying to make it collapsible - html

Related

Having an issue with changing the background color on a navbar.

why collapse option under navigation bar not working in bootstrap3?

Li tags in Navigation Bar is not Responsive

Centering logo-image and put the responsive navbar right under the logo

My bootstrap 3 responsive navbar doesn't collapse.

Categories

Resources