I have this code where I try to make a hamburger bootstrap menu with black stripes, and white background. But I don't seem to quite get that done. And next to that my hamburger bootstrap menu does open on mobile format, but doesnt close again. I have surfed internet for solutions, but nothing works. The code: https://jsfiddle.net/u0fm0trs/
<head>
<title>Makelaardij Jos Bloemendal</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/mystyles.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Footer-with-map.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>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-inverse navbar-static-top" role="navigation" style="background-color: white; border: none;">
<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>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="navbar">
<ul class="nav navbar-nav navbar-left">
<img src="img/logo checklist 3.jpg">
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="Home"><p>Home</p></li>
<li id="Woningen" class="dropdown">
<p>Woningen</p>
<ul class="dropdown-menu">
<li><p>Alle</p></li>
<li><p>Almelo</p></li>
<li><p>Den Ham OV</p></li>
<li><p>Enter</p></li>
<li><p>Hardenberg</p></li>
<li><p>Hellendoorn</p></li>
<li><p>Nijverdal</p></li>
<li><p>Rijssen</p></li>
<li><p>Vriezenveen</p></li>
<li><p>Vroomshoop</p></li>
<li><p>Wierden</p></li>
<li><p>Overige</p></li>
</ul>
</li>
<li id="Agrarisch"><p>Agrarisch</p></li>
<li id="Bedrijven"><p>Bedrijven</p></li>
<li id="Recreatie"><p>Recreatie</p></li>
<li id="Bosgrond"><p>Bosgrond</p></li>
<li id="Contact"><p>Contact</p></li>
</ul>
</div>
</div>
</nav>
There are too many Bootstrap versions in the fiddle. Just use one.
The toggle button isn't showing because you're using navbar-inverse which has white bars. Change it to navbar-default..
<nav class="navbar navbar-default navbar-static-top" role="navigation" style="background-color: white; border: none;">
...
</nav>
http://www.bootply.com/GIbsIiwP6E
Try adding into the button above your spans:
aria-expanded="false"
It "indicates the state of a collapsible element".
I also don't see why you have an extra div, which you have given id="navbar" above your ul with navbar-related classes. Maybe it is causing some issues?
Related
I'm following a bootstrap tutorial. The bootstrap styles are not being applied in my browser. Also all the required files are in the same folder.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">SHUBHI KHANDELWAL </a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li class="">WORKS</li>
<li class="">CONTACT</li>
</ul>
</div>
</div>
</nav>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Do you have error messages in the console?
Did you check the following html structure which need to be followed by bootstrap:
https://getbootstrap.com/docs/4.3/components/navs/
Do you have all the files locally in the correct folder:
css/bootstrap.min.css
js/bootstrap.min.js
Please check the documentation here to correctly include Bootstraps:
https://getbootstrap.com/docs/4.3/getting-started/introduction/
Try Bootstrap CDN
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Why isn't my bootstrap navbar not collapsing? The toggle button shows up but when I click it, nothing happens. (Written in React so using className instead of class.) I even tried copying and pasting directly from the Bootstrap example and it still doesn't work. Am I forgetting to import something somewhere? I also tried copying and pasting from this example from this other question on stackoverflow, didn't work.
<nav className="navbar navbar-default navbar-fixed-top navbar-shrink">
<div className="container">
<div className="navbar-header page-scroll">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar=in-collapse" aria-expanded="false" aria-controls="navbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-logo page-scroll" href="#about">
<img src="icon.png" />Page
</a>
</div>
<div className="collapse navbar-collapse" id="navbar-in-collapse">
<ul className="nav navbar-nav navbar-right">
<li className="hidden active">
</li>
<li className="">
<a className="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li className="">
<a className="page-scroll" href="#blog">Blog</a>
</li>
<li className="">
<a className="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
In my html, it looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title>Kaisin Li</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="./index.css" rel="stylesheet" />
<link rel="icon" href="./favicon.ico">
</head>
<body>
<div id="main"></div>
<script src="./bundle.js" defer></script>
</body>
</html>
Thanks!
In first, you need to append links to jQuery and bootrstrap.js to your page. In second, data-target="#navbar=in-collapse" should be replaced by data-target="#navbar-in-collapse". See the and run the snippet below.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-fixed-top navbar-shrink">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-in-collapse" aria-expanded="false" aria-controls="navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-logo page-scroll" href="#about">
<img src="icon.png" />Page
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-in-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="hidden active">
</li>
<li class="">
<a class="page-scroll" href="#portfolio">Portfolio</a>
</li>
<li className="">
<a class="page-scroll" href="#blog">Blog</a>
</li>
<li class="">
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
If you use bundles for jQuery and Bootstrap scrips, make shure the scripts are bundled in correct order.
try including bootstrap.min.js too
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0alpha.6/js/bootstrap.min.js" ></script>
You need to load bootstrap js
some functionality in bootstrap depends on it such as navbar collapse
check the fourth point here
your code should look something like this
<!DOCTYPE HTML>
<html>
<head>
<title>Kaisin Li</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="./index.css" rel="stylesheet" />
<link rel="icon" href="./favicon.ico">
</head>
<body>
<div id="main"></div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="./bundle.js" defer></script>
</body>
</html>
I am just trying to have the hamburger icon drop down the navbar when the screen is formatted to iphone size but it will not drop down.
I am also pretty sure that the JS and jquery placement is correct.
<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">
<link rel="stylesheet" type="text/css" href="Portfolio.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>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collpase" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
According to Bootstrap (https://getbootstrap.com/docs/4.0/components/navbar/):
You have incorrect data-toggle attribute:
data-toggle="collpase" → data-toggle="collapse"
Change the navbar-toggle button's data-target attribute to ID selector instead of class selector:
data-target=".navbar-collapse" → data-target="#navbar"
Add the ID attribute to navbar:
<div class="navbar-collapse collapse" id="navbar">
You had just a little typo at the data-toggle attribute. Also, you must always use ID selectors when you are trying to select a single element. Here is a working example (tested):
<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">
<link rel="stylesheet" type="text/css" href="Portfolio.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>
<!-- NAVBAR -->
<nav id="myNavbar" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
COTO
</div>
<div class="navbar-collapse collapse" id="myNav">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Pricing</li>
<li>Team</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- NAVBAR END -->
</body>
</html>
I have a bootstrap navbar collapse, which until yesterday was working fine. However I downloaded bootstrap and jquery rather than using the cdn and deferred my javascript dependencies and it no longer works.
Here is the code:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<script defer type="text/javascript" src="/jquery/jquery-1.12.min.js"></script>
<link defer type="text/javascript" href="/bootstrap/dist/js/bootstrap.min.js">
<script defer type="text/javascript" src="/lightgallery/dist/js/lightgallery.min.js"></script>
</head>
<body style="width: 100%">
<!-- <script src="test.js"></script> -->
<script defer type="text/javascript" src="/js/app.min.js"></script>
<script defer type="text/javascript" src="/js/homepage.min.js"></script>
<nav id="navbar" class="navbar navbar-default col-md-12 col-xs-12" style="box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);">
<div class="container-fluid col-md-6 col-md-offset-3 col-xs-12">
<!-- 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="#" style="padding: 0;">
<img src="/img/logo.png" alt="" style="height: 100%; width: auto;">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Services</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
<li><a class="fa">|</a></li>
<li><a class="fa fa-facebook" href="http://www.facebook.com/"></a></li>
<li><a class="fa fa-instagram" href="http://www.instagram.com/"></a></li>
<li><a class="fa fa-twitter" href="http://www.twitter.com/"></a></li>
</ul>
</div>
</div>
</nav>
I am current building a parallax bootstrap theme. I am having trouble understanding what is preventing the menu dropping down and the menu collapsing when the screen is resized.
Has any body had this problem before? I have tried switching where the position of the style sheets, including the js files in the footer but not success. Does anybody see the problem here just form the html?
<!DOCTYPE html>
<meta charset="UTF-8">
<html lang="en">
<head>
<title>Title</title>
<!-- Global Attributes -->
<link rel="icon" href="img/favicon.ico">
<!--[if IE]><link rel="SHORTCUT ICON" href="img/favicon.ico"/><![endif]-->
<!-- Required Parralax JavaScript -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/waypoints.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="js/bootstrap.js"></script>
<!-- Required Styles for theme -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<header>
<div class="navbar navbar-default 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>
<img src="img/logo.png">
</div>
<div class="navbar-collapse collapse">
<ul class="menu nav navbar-nav pull-right">
<li class="dropdown">
Cat 1<b class="caret"></b>
<ul class="dropdown-menu">
<li>Sub Cat 1</li>
<li>Sub Cat 2</li>
<li>Sub Cat 3</li>
<li>Sub Cat 3</li>
</ul>
</li>
</div>
</div>
</div>
</header>
Your line:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
should be
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="navbar-collapse">