I'm pretty much using the exact W3schools example for collapsing navbars, and it isn't working. I'm sure I'm overlooking something but can't seem to pin point it. Attached is my HTML code. Cheers!
<script type="text/javascript" src="assets/js/modernizr.min.js"></script>
<script type="text/javascript" >
openTab("Home")
function openTab(tabName) {
var i;
var x = document.getElementsByClassName("tab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}
</script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
The code snippet that you have provided is correct. The main reason behind the issue will be the missing of bootstrap or jQuery files. Please include the below lines and please run again the code.
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
include this 4 lines to your head tag
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
You should include proper <head> tag. The following code should work fine:
<head>
<title>Bootstrap Case</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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
Just copy, paste and replace your content It's working fine. Most probably you are missing bootstrap files.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</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/1.12.4/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">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Company Name</a>
</div>
<div class="navbar-collapse collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
Related
My nav-bar drop-down menu button is not working?
I am trying to work with the nav-bar button as shown in the code
below. I have attached the code of my index.html and styles.css file. Someone,
please help me regarding this. The drop-down menu us not appearing
.navbar-brand h1 {
margin: 0;
font-size: 25px;
float: left;
}
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, intial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/jquery-3.5.0.min"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<title>Module 3 Solution</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header ">
<a href="index.html" class="float-sm-left visible-md visible-lg">
<div id="logo-img" alt="logo"></div>
</a>
<div class="navbar-brand" class="float-left">
<a href="index.html">
<h1>Food, LLC</h1>
</a>
</div>
</div>
<div class="navbar-header">
<span class="navbar-toggler-icon"></span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav visible-xs">
<li>Chicken</li>
<li>Beef</li>
<li>Susuhi</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
</body>
</HTML>
EDIT: Try moving your JQuery and Bootstrap JS files to right above the </body> tag (leave the Bootstrap CSS in the <head>).
I have made a Codpen for you. This is the base code from Bootstrap's documentation. I've swapped in some of the custom code you had (and removed the repeated code) and it's working there with the minimum code, so if it still doesn't work for you, there is code somewhere else that needs changing.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<a class="float-sm-left" href="index.html">
<h1>Food, LLC</h1>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0 visible-xs">
<li class="nav-item">Chicken</li>
<li class="nav-item">Beef</li>
<li class="nav-item">Susuhi</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
The collapse option to group the list of options in the navigation bar is not working.
Please check the HTML code and help by giving the solution to it.
I want it to be fully responsive.
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>TestRank</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toogle="collapse" data-target="#mynavbar">
<!--<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"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
</div>
<div class="navbar-collapse collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src ="js/bootstrap.min.js"></script>
</body>
</html>
You had a typo at <button type="button" class="navbar-toggle" data-toogle="collapse" data-target="#mynavbar" aria-expanded="false"> where data-toogle="collapse" is wrong what must be data-toggle="collapse"
This is the right code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar" aria-expanded="false">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src= "Logo.png" style="width:120px; height:30px;" alt="TestRank" ></a>
</div>
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
when i am using bootstrap col-md-offset-2, then the horizontal scroll bar appearing in window view as well as mobile view. I don't know how this horizontal scroll bar appear in my website.
please help me.
thank you...
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/norwich.css">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- header -->
<div class="row">
<div class="col-md-offset-2 col-md-8">
<header>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-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>
<h1>LOGO</h1>
</div>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a >HOME</a></li>
<li><a >ABOUT</a></li>
<li><a >SKIP HIRE</a></li>
<li><a >CONTACT</a></li>
</ul>
</div>
</nav>
</header>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Surround all your code with
<div class="container-fluid"></div>
Here is a JSFiddle demo
Hi when you dont have a container behind the
<div class="row"></div>
It will at a negative margin.
So you can do this instead.
<!-- header -->
<header>
<nav class="navbar navbar-inverse col-md-offset-2 col-md-8" role="navigation">
<div class="navbar-header">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-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>
<h1>LOGO</h1>
</div>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a >HOME</a></li>
<li><a >ABOUT</a></li>
<li><a >SKIP HIRE</a></li>
<li><a >CONTACT</a></li>
</ul>
</div>
</nav>
</header>
I'm just beginning with twitter bootstrap 3.
I just made this fixed navigation bar, but it doesn't seems to be working.
The navbar isn't fixed.
Here's the code.
What am I doing wrong ?
<!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>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<!-- ========== -->
<!-- = Logo = -->
<!-- ========== -->
<div class="span7">
<a class="brand" href="index.html">
<span class="pacifico">Webmarket</span>
</a>
</div>
</div>
<!-- ============= -->
<!-- NavBar -->
<br>
<div class="container-fluid">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Live Link :- http://robocorp.in/design/
Any suggestions are welcome.
<div class="navbar navbar-default navbar-fixed-top navbar-main">
<div class="container">
<div class="row">
<div class="col-md-15 col-center">
<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>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Try this and let me know. You have way too many span icon bars for the support for other devices, so I removed a couple.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
These don't exist on your webserver. I suggest putting the CSS In a folder called "assets" and then refering to them like so:
<link href="/assets/bootstrap.min.css" rel="stylesheet">
<link href="/assets/main.css" rel="stylesheet">
and the same with the JS
<!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.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:400,700,400italic,700italic&subset=latin,latin-ext,greek' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Find Your Mac</li>
<li>How it Works</li>
<li>About Us</li>
<li>Contact Us</li>
<li>FAQ</li>
</ul>
</div>
</div>
<div class="row">
<a class="brand" href="#">Test</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
I'm working with the new Bootstrap 3 and everything works fine, except dropdowns that I want to create. Please note me if someone knows what I'm doing wrong. Here is the source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/bootstrap.js"></script>
<script src="js/jquery.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutorial</title>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand">Tech Site</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>StumbleUpon</li>
<li>Google+</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-brand">Tech Site</div>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Blog</li>
<li class="dropdown">
Social Media <b class="caret"></b>
<ul class="dropdown-menu">
<li>Twitter</li>
<li>Facebook</li>
<li>StumbleUpon</li>
<li>Google+</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<!-- SCRIPTS -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>