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">
Related
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 this problem, been dealing with it for a day now. My dropdown hamburger menu wont open up when resizing the browser window into a smaller size. The icon is showing, but when clicked nothing happens. I have no CSS for this one, yet. The CSS-file i have linked is empty.
What am I doing wrong?
<!DOCTYPE html>
<html lang="sv-se">
<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>Satsafett</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="satsafettBS.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<!-- Header -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<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>
satsafett
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Speltips</li>
<li>Oddsbonusar</li>
<li>TV-matcher</li>
<li>Casinobonusar</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
you have wrong value in data-target attribue. It should be:
data-target="#mainNavBar"
You are missing hash
<!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.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 navbar-fixed-top">
<div class="container-fluid">
<!-- Logo -->
<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>
satsafett
</div>
<!-- Menu Items -->
<div class="collapse navbar-collapse" id="mainNavBar">
<ul class="nav navbar-nav">
<li class="active">Speltips</li>
<li>Oddsbonusar</li>
<li>TV-matcher</li>
<li>Casinobonusar</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
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?
I am trying to get my practice web page to show a hamburger menu when on a mobile device, but no matter what I try nothing seems to get it to go that hamburger menu. I have tried to copy the code exactly how it looks on the bootstrap website, but again it's not working. I feel like I may be missing a plug in or using the wrong bootstrap file, the full length of code is detailed below.
Other Contextual Information
I am currently learning how to code through an online course and I have come to the section on twitter bootstrap. It seems the professor is teaching an older version of bootstrap; since none of what he is saying is directly lining up with the bootstrap website.
<!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>Bootstrap 101 Template</title>
<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<style>
.box {
background-color:#d3d3d3;
}
</style>
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Title</a>
<div class="nav-collapse collapse">
<ul class="nav nav-tabs" role="menu" aria-labelledby="dropdownMenu1">
<li class="active">Home</li>
<li>scout</li>
<li>chill</li>
<li>chill</li>
</ul>
</div>
</div>
</div>
<h1>Hello, world!</h1>
<div class="container-fluid">
<div class="row">
<div class="span6 box">Content</div>
<div class="span6 box">Content</div>
</div>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I used the template posted on getbootstrap.com. View full page and zoom in to see the burger menu.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- burger icon -->
<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="#">Hello world</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li class="active">Static top <span class="sr-only">(current)</span></li>
<li>Fixed top</li>
</ul>
</div>
</div>
</nav>
I believe that .nav.nav-tabs are used for "in-page" navigation tabs. I've never seen it used in a navbar but I may be wrong. And if your professor is using bootstrap 2, the documentation is located here for your reference. A good way to learn bootstrap is go to the bootstrap components page, right-click on any element you want to learn about and click on inspect element to see the html of the component.
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">