I am trying this navbar out with a dropdown. When I try to build it into my webservice I don't get the dropdown working. I can click on it but nothing happens there. This is my current setup:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Foo</li>
<li class="dropdown">
Bar<span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Foo</li>
<li role="separator" class="divider"></li>
<li>Bar</li>
<li role="separator" class="divider"></li>
<li>Baz</li>
</ul>
</li>
<li>Baz</li>
</ul>
</div>
</div>
</nav>
The navbar looks correct and is styled like in the documentation but there no points that are getting dropped down.
Add J query & Bootstrap File
Remove this class collapse
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" style="width: 60%; margin: 0 auto;">
<div class="container-fluid">
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Foo</li>
<li class="dropdown">
Bar<span class="caret"></span>
<ul class="dropdown-menu">
<li role="separator" class="divider"></li>
<li>Foo</li>
<li role="separator" class="divider"></li>
<li>Bar</li>
<li role="separator" class="divider"></li>
<li>Baz</li>
</ul>
</li>
<li>Baz</li>
</ul>
</div>
</div>
</nav>
Navbar
Default navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
Here is the plugin: http://getbootstrap.com/javascript/#collapse
From: http://getbootstrap.com/components/#navbar
Because you are missing responsive dropdown
HTML
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
DEMO HERE
Related
I'm working on a project using CodePen and I'm using bootstrap to make a navbar. But for some reason it's displaying vertically instead of horizontally. Even when I copy and paste code from the W3Schools examples and the Bootstrap website. I don't know what else to do. Please help.
This is the W3Schools example code:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
This is example code from the Bootstrap website:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Both do not work. And yes, I've triple checked my <link> and <script> tags.
Edit: here is my CodePen
First like in the comments you are using bootstrap 3 markup and you are linking to both bootstrap 3 and 4 remove the bootstrap 4 css. Then you need to have the div with the class of collapse navbar-collapse so just add this to the div that has the id of nav just like the following:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
You may want to add the collapse button to the navbar header as well otherwise your links wont show up at mobile widths so it would look like:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#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>
<a class="navbar-brand" href="#about">
<span style="font-family: 'Source Code Pro', Monospace; color:green"><i class="fa fa-code"></i>Ryan</span>
</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
As someone said - remove bootstrap 4 from loaded CSS files and it will work
I have a .svg image (I can show the code if needed), and I am trying to put it in the navbar of my bootstrap code as a logo.
So I tried to put it in the navbar-brand tag where the logo is supposed to be, with this code:
<a class="navbar-brand" href="#">
<img src="logo.svg" alt="Nice coconut tree"/>
</a>
But it's not fitting the navbar as you can see:
and here is the css:
img { width: 20%; height: auto; }
And I just want it to be on the left of the "A PROPOS" item and to fit the size of the navbar...
I tried to change the width and height of the image but nothing changes.
Thank you
I tried to create something basic, see if it can help you...
To avoid seeing the mobile version use the Expand snippet & Full page links.
.navbar-brand img {width: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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="#">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/84/Logo_example.svg" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I have tried everything to get my nav bar to appear along with my about and home page.
When I use the following code, even though I am certain my css is working, I cannot get a nav bar to appear. All that happens is my 'about' link goes to the far right, and my 'home' goes to the left, but there is no nav bar to be seen.
Does anyone know why my nav bar css is not activating? Even though all of the other bootstrap css is functional?
<!DOCTYPE html>
<html>
<head>
<title>Attempting to get nav bar to work</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../Bootstrap/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="../Bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class='navbar navbar-default'>
<a href='../' class='navbar-brand'>
Home
</a>
<ul class='nav navbar-nav navbar-right'>
About
</ul>
</div>
</body>
</html>
Okay, so this is what I get from Bootstrap and it is totally different from what you have got:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Home</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
Check out the snippet in full screen.
Yes I'm new and yes this is probably not even a real problem, but it still bugs me...
This is what i got...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Emmet & Bootstrap</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
</head>
<body>
<div class="navbar">
<ul>
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</div>
<!-- JavaScript -->
<script src="dist/js/jquery.js"></script>
<script src="dist/js/bootstrap.js"></script>
</body>
</html>
And this is what i get...
What have i missed? (I'm running this in Chrome using the Brackets (node.js based) live preview)
EDIT1:
#Nhan I want the smallest possible bit of html that's still valid in the scenes of bootstrap. I.e. The least amount of rows that still change appearance if i exclude the bootstrap.css. I'm not looking for a specific "look" i just want to learn the fundamentals of bootstrap, from the ground up (I.e. i have no interest in a flying start / ctrl+c, ctrl+v).
You're missing about 90% of the navbar related structure. From: http://getbootstrap.com/components/#navbar
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- 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="#bs-example-navbar-collapse-1" 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="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Bootstrap is almost certainly fine, you just need to provide it with the correct working materials to style. I put your navbar code into a bootstrap page I know works and got the exact same output you're seeing due to the lack of appropriate styles and structure.
I see what you mean. Below is the minimal markup required to implement a Bootstrap navbar:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- navbar-default: default colour scheme -->
<nav class="navbar navbar-default">
<!-- Bootstrap container -->
<div class="container">
<!-- Toggle menu on smaller screen sizes (mobile) -->
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1"> + </button>
<!-- Bootstrap collapse, work with the button above -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Link list -->
<ul class="nav navbar-nav">
<li class="active">
Link
</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
I've been learning to use bootstrap so I decided to use it to create a Navbar. So, I decided to try and centre it so I looked online for a solution but none of them work. So please could you advise me on what to do.
HTML:
</head>
<body>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">Items <span class="sr-only"></span>
<ul class="dropdown-menu">
<li>Item 1</li>
<li role="separator" class="divider"></li>
<li>Item 2 </li>
<li role="separator" class="divider"></li>
<li>Item 3</li>
</ul></li>
</ul>
</div>
Current CSS:
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
It looks like the CSS you have and code you have will work fine. Just wrap your div in a nav element.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse">
... Rest of Your Code ...
</div>
</nav>
try use this CSS code to solve your problem:
.navbar-collapse .navbar-nav{
margin: 0 auto;
width: 300px; /*(example - [width: auto; is wrong])*/
}
.navbar-collapse{
margin: 0 auto;
}
.navbar-collapse li{
margin: 0 auto;
}
If you are using bootstrap, why are you using your current CSS for navbar? Just use what bootstrap is offering.
I am not sure whether you mean to center the text in the navbar or center the navbar all together, but this is found on bootstrap's website
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<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="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>