#Bhanu pratap solved the problem. check it out at the end of this question.
I've been following an old course to build a navbar collapse (sandwich).
The problem is the page in the course appears to have a black bar on top and navbar appears when shrinking the page. For me, I just get a button on the left. Also, when I shrink the page I don't get the navbar.
here is the source code:
<!DOCTYPE html>
<html lang="arabic">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" herf="assets/img/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/main.js"></script>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<!-- Font-Awesome icons-->
<link href="assets/css/font-awesome/css/font-awesome.min.css">
<!-- Google Fonts LATEEF -->
<link href="https://fonts.googleapis.com/css?family=Changa:400,600&subset=arabic,latin-ext" rel="stylesheet">
<title>Bootstrap to Wordpress</title>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- HEADER -->
<header class="site-header" role="banner">
<!-- NAVBAR -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
</div><!-- navbar-header -->
<div class="navbar-collapse collapse">
</div><!-- collapse nav-->
</div><!-- container -->
</div><!-- navbar -->
</div><!-- navbar-wrapper-->
</header>
<!-- FOOTER TAG -->
<footer>
</footer>
<!-- MODAL -->
<div>
</div>
<!-- BOOTSTRAP CORE JAVASCRIPT
PLACED AT THE END OF THE DOCUMENT SO THE PAGES
LOAD FASTER!
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="assets/js/jquery-3.1.1.min.js"></script>
<script src="assets/js/main.js"></script>
<!-- Type google font -->
<script src="https://use.typekit.net/byz5vqz.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</body>
</html>
I tried to change this part with another source code, yet the problem occurs again.
<!-- NAVBAR -->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<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>
<a class="navbar-brand" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
</div><!-- navbar-header -->
<div class="navbar-collapse collapse">
</div><!-- collapse nav-->
</div><!-- container -->
</div><!-- navbar -->
</div><!-- navbar-wrapper-->
UPDATE:
#Bhanu pratap solved the propblem by addin ul and li to show the visible effects. here is his source code:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
</div><!-- navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
First Menu Item
</li>
<li>
Second Menu Item
</li>
<li>
Third Menu Item
</li>
</ul>
</div><!-- collapse nav-->
</div><!-- container -->
</div><!-- navbar -->
</div>
The Bootstrap 5 data-* attribute syntax has changed and now you'll need to add "bs-" (for Bootstrap) after the first dash and then the rest of your class specification.
Try this for your button tag section:
<button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse" data-bs-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>
Try this.. i have just added ul and li to your code to show visible effect you can use your code section there..
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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" herf="/"><img src="assets/img/logo.png" alt="Bootstrap to WordPress"></a>
</div><!-- navbar-header -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
First Menu Item
</li>
<li>
Second Menu Item
</li>
<li>
Third Menu Item
</li>
</ul>
</div><!-- collapse nav-->
</div><!-- container -->
</div><!-- navbar -->
</div>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) {
$(this).collapse('hide');
} });
$("button.navbar-toggle").click(function (e) {
$("#main-navbar").collapse('hide');
$("#main-navbar").removeClass("in"); });
Related
I'm looking for a collapsible navbar. I attempted it with the code below without any success.
The following is my code:
<!DOCTYPE html>
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
</head>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data- toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon- menu-hamburger"></span></button>
</div>
<div class="collapse navbar-collapse navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You have missed ,
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
within your button tag. Also make sure to add correct bootstrap and Jquery CDNs
<html>
<head>
<title> Portfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/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>
<body>
<!-- nav bar -->
<nav style="background-color:#ffaa00" class="navbar navbar-light navbar-static-top">
<div class="container">
<div class="navbar-header">
Portfolio Site
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navigation"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
<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 navigation">
<ul class="nav navbar-nav navbar-right" >
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
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>
I have a very simple page which is made of a navigation bar and some buttons. However, these buttons are not showing when I visit the page using a mobile device.
I have checked several threads such as this and this this, but I can't see where is my problem.
Fiddle link
Code:
<!DOCTYPE html>
<html>
<head>
<title>Flask Template Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<style type="text/css">
.container {
max-width: 1400px;
padding-top: 100px;
}
h2 {color: #55acee;}
</style>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Test</li>
<li>Endpoints</li>
<li>Information</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<!--<h2>This is part of my base template</h2>-->
<br>
<h2>Hello</h2>
<br>
<!--<h2>This is part of my base template</h2>-->
</div>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Thanks
You forgot to include to code that shows the collapsible navbar menu:
replace:
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
</div>
with:
<div class="navbar-header">
<a class="navbar-brand" href="/">My API</a>
<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>
</div>
Can someone tell me why my links aren't lining up horizontally? I'm using bootstrap 3. I've referenced the bootstrap website and my code appears identical to their examples. I'm not using any custom CSS other than the bootstrap library so I am unsure how to remedy, any assistance gladly appreciated!
<!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>Test</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainnav" 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>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li><a href="#">Home</li>
<li><a href="#">About</li>
<li><a href="#">Contact</li>
</ul>
</div>
</div>
</nav>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
</body>
</html>
You are missing closing anchor tags in your unordered list.
<li>Home</li>
<li>About</li>
<li>Contact</li>
Nav:
<nav class="navbar navbar-default 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>
</div>
<!-- the nav links, forms, and other content for toggling -->
<div class="navbar-collapse collapse" id="mainnav">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
JSFiddle
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>