<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body data-spy="scroll" data-target="#my-navbar">
<!--Start of the navbar section-->
<nav id="my-navbar" 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="glyphicon glyphicon-align-justify"></span>
</button>
<div class="navbar-brand">Lorem Ipsum</div>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</nav>
<!--End of the navbar section-->
</body>
</html>
The code is working fine and I have read through the bootstrap manual and don't see any errors in my class names, but when I collapse my browser window to a phone view the button doesn't seems to work and it doesn't drop down the navbar as expected.
There were a missing body tag, I replaced that with a div and works fine.
Here your code working as expected: http://www.codeply.com/go/dWnwMpejAH
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body> <!-- changed here -->
<div data-spy="scroll" data-target="#my-navbar">
<!--Start of the navbar section-->
<nav id="my-navbar" 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="glyphicon glyphicon-align-justify"></span>
</button>
<div class="navbar-brand">Lorem Ipsum</div>
</div>
<div id="navbar-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Lorem Ipsum</li>
<li>Lorem Ipsum</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Lorem Ipsum</li>
</ul>
</div>
</div>
</nav>
<!--End of the navbar section-->
</div>
</body>
You forgot to add, viewport meta. Please add this inside your <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
And yeah, you forgot to add bootstrap-responsive.css:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-responsive.css.min.css" />
Working Output: http://output.jsbin.com/gelobacoxi
you need the following in your <head> tag, as per the boostrap get started documentation:
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Related
I have a fixed navbar and the body is scrollable. I want to add a layer on top of navbar without affecting the scrollable capability but my navbar is fixed at the top. How can I solve this.
Here is my code
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body{
padding-top: 40px;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<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>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services
<li>Gallery
<li>Faq
<li>ContactUs
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
You can wrap your content in navbar-fixed-top class.
<html lang="en">
<head>
<meta charset="utf-8">
<title> hot</title>
<meta name="description" content="Wiredwiki App">
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link href="css/styles.css" rel="stylesheet">
</head>
<style>
body {
padding-top: 90px;
}
.root {
min-height: 100vh;
}
</style>
<body data-spy="scroll" data-target="#my-navbar">
<div class="navbar-fixed-top">
<p>I am top of navbar</p>
<!-- Navbar -->
<nav class="navbar navbar-inverse" id="my-navbar">
<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>
<span class="icon-bar"></span>
</button>
</div><!-- Navbar Header-->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
<li>Our Services</li>
<li>Gallery</li>
<li>Faq</li>
<li>ContactUs</li>
</li>
</ul>
</div>
</div><!-- End Container-->
</nav><!-- End navbar -->
</div>
<div class="root">
<p>MY HEIGHT IS TOO LONG</p>
</div>
</body>
I'm new to HTML and im trying to use bootstrap.
I made a dropdown menu, but it works only on the index.html Page.
I also tried using following code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<html>
<head>
<title>Tutorials</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/tutorials.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrapov grid sistem-->
<div class="navbar-header"> <img src="img/coding.png" width="50" height="50" /> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span style="color:white">About Us</span></li>
<li><span style="color:white">Contact</span></li>
<li><span style="color:white">Registration</span></li>
<li class="dropdown">
Tutorials<span class="caret"></span>
<ul class="dropdown-menu">
<li><span style="color:black">XSS</span></li>
<li><span style="color:black">CSRF</span></li>
<li><span style="color:black">SQL Injection</span></li>
<li><span style="color:black">RCE</span></li>
<li><span style="color:black">Exploit</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
So i've tried to use it on other page too, e.g. about.html
Following Code:
<!DOCTYPE html>
<html>
<head>
<title>About Us</title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="img/coding.png"><!-- Favicon-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/about.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
</head>
<body>
<!-- Menu which is on every page -->
<nav class="navbar navbar-fixed-top" id = "s">
<div class="container">
<div class="row">
<div class="col-md-7"> <!-- Bootstrap grid system-->
<div class="navbar-header"> <img src="img/coding.png" width="50" height="50" /> </div> <!-- Web Application Vulnerabilities-->
<!-- Hyperlinks to the sites -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><span style="color:white">About Us</span></li>
<li><span style="color:white">Contact</span></li>
<li><span style="color:white">Registration</span></li>
<li class="dropdown">
Tutorials<span class="caret"></span>
<ul class="dropdown-menu">
<li><span style="color:black">XSS</span></li>
<li><span style="color:black">CSRF</span></li>
<li><span style="color:black">SQL Injection</span></li>
<li><span style="color:black">RCE</span></li>
<li><span style="color:black">Exploit</span></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
It doesn't work it redirects me to the Tutorial Page, and dropdown menu won't open. I don't know how to fix it .
It seems you are having problem with the anchor used for dropdown:
Tutorials<span class="caret"></span>
in this as href you have added tutorials.html thats why whenever clicking on it redirecting to tutorial.html
change it to :
Tutorials<span class="caret"></span>
just change href=# instead of href=tutorial.html in that anchor tag
also add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to load jquery.
All the code work so far but whenever i try and input bootstrap elements after the header its not displaying properly? Anyone know what going on here? Not sure why because the code all works so far? Anything after the header-main div is not displaying correctly!
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=satisfy"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy"
rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" >
<img src="assets/img/logo.png">
</a>
<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>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>MENU</li>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BOOK A TABLE</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary">View Menu</div>
<div class="btn btn-primary">Book a table</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
enter image description hereEverytime I add a image with img tag to the html file the navbar stops working? Anyone have an idea... thank you in advance. I thought at first it had something to do with the img-responsive class but it seems not to be the issue.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<title>
About
</title>
<meta name="description" content="is applying to be a full stack developer student .">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link href="css.css" type="text/css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- 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="#myNav" 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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li class="active">ABOUT <span class="sr-only">(current)</span></li>
<li>RESUME</li>
<li>PROJECTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">
<p class="intro">Hi, my name is<br> Angel<br>and I am a</p>
<div class="textShow">
<div class="textSlider fade">
<p><strong>DEVELOPER</strong></p>
</div>
<div class="textSlider fade">
<p><strong>M.B.A.</strong></p>
</div>
<div class="textSlider fade">
<p><strong>VETERAN</strong></p>
</div>
<div class="textSlider fade">
<p><strong>FOODIE</strong></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 middleOne">
<p class="groundUp">Creating and building from the ground up</p>
//this breaks navbar<img class=" img-responsive beet1" src="Graphics/beetv1.svg" alt="RedBeet"/>
</div>
</div>
</body>
</html>
If there is a sample code of the responsive menu along with the photo in the menu, please send a comment in this post. If it is possible, please develop my same code so that I can put a picture in its menu.
I am making a Navbar using Bootstrap 3 and when I put in the ul tag and add a list item it doesn't show up. I have tried wrapping it in a div with the class of container but that doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap Course</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="logo.png"></a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
</div>
</div>
</div>
<div class="row">
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384- 0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="scripts.js"></script>
</body>
</html>
Please use navbar code listed in bootstrap documentation.
You need to replace class="nav-collapse collapse navbar-responsive-collapse"> with class="collapse navbar-collapse"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="logo.png">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
</ul>
</div>
</div>
</div>
<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.6/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
use border first on your css file to locate where is your nav bar location in the page like this..
div class="navbar navbar-default navbar-fixed-top" style="border:2px solid #000000">
this will guide you..
Hope it helps..
Looks like you're missing JQuery.
Add this above your bootstrap JS
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Here's an example codepen http://codepen.io/anon/pen/zBRLZo