I'm attempting to follow the bootstrap 3 examples, but I have a problem with the navbar that I seem unable to resolve. With the following html, the navbar items are present as expected in the toggle menu when the viewport is thin (mobile style), but when expanded to a reasonable desktop width, the navbar links ("example left 1", "example left 2", and "example right 1" in the html below) all disappear completely. What have I left out that makes them disappear?
<!DOCTYPE html>
<html>
<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>Server</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>Server
</div>
<div id="navbar" class="navbar-collpase collapse">
<ul class="nav navbar-nav">
<li>Example left 1</li>
<li>Example left 2</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Example right 1</li>
</ul>
</div>
</div>
</nav>
<div class="container body-content">
<h1>Welcome</h1>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
It appears you misspelled collapse in here: <div id="navbar" class="navbar-collpase collapse">
Related
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.
I'm trying to hide the contents' titles inside navbar (because they're already showed in the page's body) and they can only be showed in the collapse button when scale down the screen. In other words, except the brand, there'll be no content in the navbar, and the content can only be showed in the navbar when scale down the screen and open the collapse button. I don't know any class that can hide contents. I tried to use hidden-... but it didn't work. Could you suggest me some ways?
Here are my codes:
HTML:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<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="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<title>Module 3 Assignment</title>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-brand">
<h1>Food, LLC</h1>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-nav" 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 id="collapse-nav" class="collapse navbar-collapse">
<ul id="#nav-list" class="nav navbar-nav">
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Chicken
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs"/>Beef
</li>
<li class="hidden-md hidden-sm">
<br class="hidden-xs" />Sushi
</li>
</ul>
</div>
</div>
</nav>
</header>
<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>
I have a bootstrap navigation bar in the top which has a quite long title and a toggle button to show collapsed links in small devices.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Yet Another Bootstrap Navigation </a>
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
But in extra small devices the button comes down because this title is quite large.
Is there ant way to keep those on same line like the previous state?
Try This CSS Code
.navbar-default .navbar-brand{padding-right: 70px;}
.navbar-default .navbar-toggle{position: absolute;right: 0;}
I am trying to create a bootstrap css navbar that shows a black navigation bar at the top and it is mobile responsive. Instead the toggle navigation button shows and no navbar. Why does the toggle navigation button show?
<!DOCTYPE html>
<html lang="en">
<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="author" content="">
<title>Local Web Hosting</title>
<!--Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.js" rel="stylesheet">
<link rel="stylesheet" href="style_4.css" type="text/css">
<link rel="stylesheet" type="text/css" href="normalize.css">
<!-- Meta Description. For Search Engines. For more about
<meta> tags: w3schools.com/tags/tag_meta.asp-->
<meta name="description" content="A web hosting website.">
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.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" href="/">
<img src="images/logo.png" alt="Web Hosting Company"></a>
</div><!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>HOSTING PLANS</li>
<li>FEATURES</li>
<li>CONTACT US</li>
</ul><!--nav-->
</div><!--navbar-collapse-->
</div><!--container-->
</div><!--navbar-->
</div><!--navbar-wrapper-->
</header>
It looks like you aren't accessing the Bootstrap dependencies: See working example of you code in the Snippet below.
<link rel="stylesheet" type="text/css" href="path/to/bootstrap.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<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" href="/">
<img src="images/logo.png" alt="Web Hosting Company">
</a>
</div>
<!--navbar-header-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME
</li>
<li>ABOUT
</li>
<li>HOSTING PLANS
</li>
<li>FEATURES
</li>
<li>CONTACT US
</li>
</ul>
<!--nav-->
</div>
<!--navbar-collapse-->
</div>
<!--container-->
</div>
<!--navbar-->
</div>
<!--navbar-wrapper-->
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
Best Approach That You Make It With Your Skill Like
Java Script Code
$("#btn_toggle").click(function(e) {
$(this).toggleClass('on');
$(".main_nav").slideToggle("normal");
});
Css Code
.btn_toggle{position:absolute;width:30px;height:30px;right:5px;top:3px;display:none;cursor:pointer;border:none;z-index:2000;-webkit-transition:all 0.4s ease;
transition:all 0.4s ease;background:none;}
.btn_toggle span{position:absolute;background-color:#4e4751;height:5px;border-radius:2px;display:block;bottom:0;left:0;width:100%}
.btn_toggle span::before,.btn_toggle span::after{position:absolute;content:"";left:0;width:100%;height:5px;border-radius:2px;background-color:#4e4751;display:block;
transition:all 0.3s;backface-visibility:hidden;
}
.btn_toggle span::before{bottom:8px;right:0;}
.btn_toggle span::after{bottom:16px;left:0;}
.btn_toggle.on span{background-color:transparent;}
.btn_toggle.on span::before{transform: rotate(45deg) translate(-1px, 2px)!important;
}
.btn_toggle.on span::after{transform: rotate(-45deg) translate(1px, 2px)!important;
}
Html Code
<button class="btn_toggle" id="btn_toggle" title="Menu"><span></span></button>
<ul class="main_nav">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6 </li>
<li>7</li>
</ul>
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