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.
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>
<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">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</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">ĐÁNH GIÁ</a></li>
<li><a id="menu_link" href="ĐĂNG KÝ.HTML">ĐĂNG KÝ</a></li>
</ul>
</div><!--/.nav-collapse -->
</body>
</html>
I was wondering if someone would help me correct my html using bootstrap so that when the window is minimised the navbar automatically collapses into a hamburger icon.
Here is my HTML:
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
<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>
Hemsley Fraser
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Topics</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Thank you very much! :)
It's working fine please add both bootstrap files and jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container-fluid">
<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>
Hemsley Fraser
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Topics</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Having an issue with bootstrap3 responsive navbar and a logo - it displays fine on a desktop and works fine. When on a mobile and collapsed, I can click the button, but the menu doesn't show up - just a horizontal scroll bar. I am stuck. Here is my HTML code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap links -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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>
<a class="navbar-left" href="#">
<img src="" alt="logo" id="sitelogo" />
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>What We Do</li>
<li>Case Studies</li>
</ul>
</div>
</div>
</nav>
</div>
Add height: auto!important; to #navbar and remove position: absolute; from #navbar .nav and that should fix the problem.
have you tried removing
aria-expanded="false" aria-controls="navbar"