Hamburger and drop down not showing in mobile with Bootstrap navbar - html

I've been searching the boards here and nothing seems to cover what could be wrong. My navbar is all well and good but no hamburger or menu shows up when I go mobile. I've tried changing combinations and implementing different collapse names, but to no avail. Any ideas? Here's my code:
<header class="navbar navbar-custom" role="banner">
<div class="container">
<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>
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav pages">
<li class="page">item1</li>
<li class="page">item2</li>
<li class="page">item3</li>
<li class="page hidden-xs"><img id="nav-brand" src="images/nav-logo1.png" width="120" alt="logo description"></li>
<li class="page">item4</li>
<li class="page">item5</li>
<li class="page">item6</li>
</ul>
</div>
</div>
</header>

Check if you have the meta tag in your head section
<meta name="viewport" content="width=device-width, initial-scale=1">
Also your Nav tag is not closing after the ul element. Check your tag closures
I think the </div> after the </ul> has to be replaced

In the original code, there's a div that closes the nav. That happened when I formatted for this site. In the original, it is closed by a nav tag. I forgot to include the header sets. Here they are:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon'/ >
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet">
<script src="https://use.fontawesome.com/8633c13aa3.js"></script>
</head>

you should check the horizontal scroll when u minimize the screen.that is one of the reason when your content in not fully responsive and when u minimize the screen the scroll appears horizontally and the hamburger icon not appear...
first of all remove all content expect the navigation on your page and then minimize the screen .and if problem still appers then you sould also check that your background color and color are change or not..

Related

Responsive toggle is not working it can be a spelling issue but i can't find my mistake

I might just need an extra set of eyes. I think I did everything correctly
but the responsive btn doesn't contain anything when I resize the screen
thank you.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="Header">
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" data-target="#Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<a href="#" class="navbar-brand">
<h3>Portfolio</h3>
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">About Me</li>
<li class="nav-item">Skills</li>
<li class="nav-item">Experience</li>
<li class="nav-item">Contact</li>
</ul>
</div>
</div>
</nav>
</div>
Thank you
I do hope you know that <link> and <meta> should be in the <head> of the HTML document structure
You will also need to include the following scripts before the </body> of the document to make your Bootstrap Navbar (and other Bootstrap elements) to work properly.
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Most likely the problem is in .js, but you can also exclude the <div class="container"> and put the <a href="#" class="navbar-brand"> link before the button, the same way it is done in the Bootstrap guide.

Why can I not see any content? [duplicate]

This question already has answers here:
twitter bootstrap navbar fixed top overlapping site
(19 answers)
Closed 6 years ago.
Can anybody tell me why I can not see the text under my navbar. Is it hiding it? I have set the navbar as fixed. Is this the issue?
I am trying to add a header underneath but I can't even see the text.
Thanks in advance
Reece
<!DOCTYPE html>
<html>
<head>
<!-- LINKS TO EXTERNAL FILES (BELOW) -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slyderesp.css">
<title></title>
</head>
<body>
<!-- NAVBAR (RESPONSIVE) -->
<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="#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-brand" href="#">Slyde</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Meet The Band</li>
<li>Photos</li>
<li>Videos</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!--HEADER (RESPONSIVE)-->
<div>WHY CANT I SEE THIS?</div>
<!--LINK TO EXTERNAL FILES (BELOW) -->
<script type="text/javaScript" src="js/slyderesp.js"></script>
<script src="js/jquery-3.1.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Your navbar has the class .navbar-fixed-top which makes it fixed in the browser window. Your <div> is just below it. Remove that class or add some padding to your body.

Bootstrap navigationbar overlay text

i created with bootstrap an "easy" navigationbar. Now the navigationbar overlay the text. I tried to give the .navbar a margin-bottom of 50px, with no result. Here is the Page and here the code:
<!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">
<title>Seite</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/meine.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">Startpage4you</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Anmelden</li>
</ul>
</div>
</div>
</nav>
<div class="row">
<div class="col-md-2">.col-md-4</div>
<div class="col-md-8">.ccol-md-8</div>
<div class="col-md-2">.col-md-4</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
my stylesheet
.navbar{
margin-bottom: 50px;
}
Because your navigation bar has a fixed property, everything else will appear underneath it, and pushed up to the top of the page.
So you just need to add margin-top:51px to your div 'row', in order for it to be seen.
What I would do though, is put the div class row inside a container, and then apply the margin-top to the container. Then you can use that for subsequent pages.
Since you are using a fixed navbar, you need to add padding to your body just like the bootstrap docs say:
body {
padding-top: 70px;
}
http://getbootstrap.com/components/#navbar-fixed-top

bootstrap navbar collapse not fuctioning and the answers on other questions didn't work

I am trying to make a collapsable navbar with bootstrap, the nav does collapse but when I click on it it does not dropdown here is all the code I have in my index html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Honk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="public/stylesheets/styles.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="public/stylesheets/custom.css">
</head>
<body>
<nav class="navbar navbar-fixed-top 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>
<img class="logo" src="public/images/honklogoo.png" alt="">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="discrip" href="#">About</a></li>
<li>Commuters</li>
<li>Travelers</li>
<li>On Demand</li>
<li>Safety</li>
<li>Download</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
you dont have the the bootstrap js script in your html (you just have the css)
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
its working here: http://jsfiddle.net/swm53ran/26/
btw, make sure you put it after your jquery script since bootstrap is dependent on jquery

navbar collapse not working in bootstrap

try to start learning about Bootstrap. i create little code to create responsive menu, like this
<head>
<meta charset="UTF-8">
<title>Bootstrap</title>
<link rel="stylesheet" type="text/css" href="CSS/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<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>
Application Name
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" src="JS/bootstrap.js"></script>
</body>
</html>
my question is, why when i try to select menu in small browser, menu does not show ?
can some one tell me why?
thanks
My geuss is that you didn't load jQuery. Place this in your header and see if it works:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
Also i suggest to load the bootstrap js file also in the header, just after the jQuery library.
It is most likely because the bootstrap.js script relies on jQuery to work. Try including jQuery before bootstrap.js
Not sure if this helps but I noticed that on the bootstrap site its tells you to link js files in the footer.
I also had wordpress place them in my header as i had to enqueue the scripts in my functions.php file. Once i removed the link to the jquery.js file and bootstrap-min.js in the footer the nav button began to collapse correctly.