Why my button doesn't want to work when browser window collapsed? I mean once hamburger menu button is clicked no menu appears.
Here is my HTML:
<html>
<head>
</head>
<body>
<!-- Navbar style available in Bootstrap framework-->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- /end-->
<!-- Anything that has to be responsive we are going to keep inside the Bootstrap grid -->
<div class="container">
<!-- /end -->
<div class="navbar-header">
<button type="button" class="navbar-toggle btn-lg" data-toggle="collapse" data-target=".navbar-collapse" id="btnnavbar">
<!-- For screen readers only -->
<span class="sr-only">Toggle navigation</span>
<!-- /end -->
<!-- Hamburger menu button appears when browser window has been shrinked -->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /end -->
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand" href="http://codepen.io/ekilja01"><img id="imgbrand" src="http://www.kiljakandweb.com/favicon.png" alt="brand logo"></a>
</div>
I guess everyone is fine until this point
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active" id="btnhome">About</li>
<li id="btnhome">Portfolio</li>
<li id="btnhome">Contact</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I appreciate all the help I can get :)
I'm trying to do a collapsable navbar with Bootstrap 3.3.7 with a hamburger icon on smaller viewports.
I can't get the hamburger icon to work. I've managed to make a hamburger icon which is visible only on smaller viewports but when I click the hamburger icon it doesn't show the menu items that it should contain.
How can I make the hamburger icon work?
Here is the code for the navigation bar:
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-inverse">
<div class="container"> <!-- Creates margins for the navbar content on left and right -->
<!-- Home icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target:"#mainNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="glyphicon glyphicon-home"></span>
</div>
<!-- Menu items -->
<div class="collapse navbar-collapse" id="mainNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Work</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
Try this snippet... taken from w3schools... simple and cool.. dont forget to add bootstrap JS file
<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">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
You need to include the bootstrap js cdn within your head tags and making sure you have the latest version of jQuery.
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
Keep in mind, you need to load the jQuery before loading in Bootstrap.
Here is a working fiddle: https://jsfiddle.net/hkLfx6u8/16/
I'm new and I don't speak english very good but I think that You can understand me and help :). I just started my adventure with bootstrap.
So... my navbar when has only 4 /li/ work with all screen sizes.
Here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed -->
<a class="navbar-brand" href="index.html">Business Casual</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Blog
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
But the problem is when I modify navbar and add for example 2 more /li/ like this:
<!-- Navigation -->
<nav class="navbar navbar-default " role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<a class="navbar-brand" href="#">Health</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li>
Main menu
</li>
<li>
<a href="#>Doctors</a>
</li>
<li>
Presciprions
</li>
#if(Auth::check())
<li>
Panel
</li>
<li>
Logout
</li>
#else
<li>
Login
</li>
<li>
Register
</li>
#endif
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
My navbar is not responsive with screen between 768 and 992 / and / 992 and 1200. I think, because It doesnt work on Tablets and my navbar is curling - I would like to be always on one line, no matter witch size screen is. Where is my mistake?
Link to page
Please add this code to your custom file css
#media screen (min-width: 768px) and (max-width:1200){
.nav>li>a {
padding: 36px 5px;
}
}
So I'm trying to make a nice header at the top of my Django site that collapses whenever someone has a small window or they're on mobile. The nav menu collapses fine and looks great. However, whenever you click on the collapsed menu button (the hamburger icon), nothing happens when it should be expanding the menu. I've made sure that my actually points to the correct thing, being ".navbar-collapse". I've looked at other questions like this that show examples that work with the same things I have, so I'm not sure why it isn't working for me.
Here's where I setup my navbar:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Any ideas?
Your code seems working fine, most probably the problem has to be with your jquery and/or bootstrap.js CDN's. Insert the correct CDN's.
<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.3.7/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>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="/">My Name</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href='/'>Home</a></li>
<li><a href='/blog/'>Blog</a></li>
<li><a href='/projects/'>Projects</a></li>
<li><a href='/resume/'>Resume</a></li>
<li><a href='/contact/'>Contact</a></li>
</ul>
</nav><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
For others who will get here from a web search:
I had this same problem - not being able to expand a navbar - but all of my code was fine.
My problem was that I had a network-level ad blocker that was blocking some of my CDN'ed scripts.
Facepalm.
#AVI's answer helped me reach this conclusion, check your CDN
I am using a bootstrap template, and I cannot for the life of me figure out how to get my navbar text to get to the bottom-center of the screen. I have tried editing the bootstrap css for .navbar, .navbar-right, etc with vertical-align: bottom. It stays at the top no matter what.
Here is a link to the bootstrap template http://startbootstrap.com/template-overviews/landing-page/
And here is the code:
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<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>
<!--a class="navbar-brand topnav" href="#">Start Bootstrap</a> -->
<img src="img/RyanIsGreat.png" width=200px height=100px>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav navbar-right" >
<!--Here is what I am trying to bottom-center align
The about, services, and contacts all appear
on the right, as is shown in the image-->
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Use the navbar-fixed-bottom class..
<nav class="navbar navbar-default navbar-fixed-bottom topnav" role="navigation">
<div class="container topnav">
...
http://www.codeply.com/go/RBR3Hsg5bH
The navbar that I have managed to create is working just fine. However, when I collapse the navbar by re-sizing the window it disappears as I try to open the menu in that view.
Why is the drop-down menu disappearing in mobile view. What am I doing wrong?
HTML code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- 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">
<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 page-scroll" href="#page-top">Kirori Mal College</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Why Recruit? <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Why Recruit?</li>
<li>Demographics</li>
<li>Faculty</li>
<li>Academics</li>
<li>Alumni</li>
</ul>
</li>
<!-- End of nav bar tabs -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Link to Website and
Link to CSS file.