*<nav class="navbar 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>
<a class="navbar-brand" href="#">MRA car Rental</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li></span> Register</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>*
When I resize the browser and click on the button, it doesn't works. What's wrong with the code above?
do you have boostraps js and css files you can add these to your html.
<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Related
Can anyone tell me why this navbar doesn't work. I tried everything but it just remains collapsed all the time
<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>
<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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
You're currently using a Bootstrap 3 navbar but pulling the Bootstrap 4 CSS.
Replace your Bootstrap CSS file with this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
If you wish to use the navbar, you'll also need the javascript file and jquery
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Here's the full HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</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="#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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<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" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
your HTML structure seems to be fine if you load every library needed .
You need
bootstrap 4 css https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css
jQuery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
bootstrap 4 js https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js which uses jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<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>
<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>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
your code seems also to require https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js (it for pop-up box that appears when the user clicks on an element) Your menu works without it
I am using Bootstrap3 <nav>, in the sample code the team used navbar-toggle collapsed class to collapse the elements in navbar on small screen.
My question is how to change the order of them when collapsed?
I made a short snippet:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png">
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</nav>
</body>
</html>
To clarify, in my <nav>, from left to right there are a list, an image, another list. When they are collapsed on small screen, the order will be from top to bottom, list, image and list. How to put the image at the top when collapsed?
The easiest way would be to create the brand html twice, and make one visible on xs and the other hidden on xs.
You can do this by adding the visible-xs and hidden-xs classes to the containers that you want to be either visible or hidden when the navbar is collapsed.
By doing this you can display the brand image in both places without having to add any JavaScript.
CodePen Demo
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".nav" aria-expanded="false">
<span class="sr-only">Options</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<ul class="nav navbar-nav collapse navbar-collapse">
<li class="dropdown">
<div class="navbar-header visible-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars" aria-hidden="true"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>LINK1</li>
<li>LINK2</li>
</ul>
</li>
</ul>
<div class="navbar-header hidden-xs">
<a class="navbar-brand" href="#">
<img alt="BRAND" src="some/img.png" />
</a>
</div>
<ul class="nav navbar-nav navbar-right collapse navbar-collapse">
<li class="dropdown">
Hi! User<span class="caret"></span>
<ul class="dropdown-menu">
<li> Profile</li>
<li> Feedback</li>
<li role="separator" class="divider"></li>
<li> Log Out</li>
</ul>
</li>
</ul>
</nav>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
I have seen several questions related to this, but none seemed to solve my problem. I want to exclude some menu items from collapsing when on mobile. Specifically the "User Name" item in this example. I have managed to get it working (so-so), but the left margin disappears when on mobile. Any solutions to this?
Here is my code:
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<ul class="nav navbar-nav pull-left">
<li> User Name </li>
</ul>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> Home</li>
<li>Profile</li>
<li>Messages</li>
<li class="visible-xs" >Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
Thanks!
Use navbar-brand instead which will have the proper alignment on mobile..
http://www.codeply.com/go/CM2sytawRI
<nav role="navigation" class="navbar navbar-default">
<div class="navbar-header">
<div class="navbar-brand"><a class="" href="#"> User Name </a></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"> Home</li>
<li>Profile</li>
<li>Messages</li>
<li class="visible-xs">Contact Us</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login</li>
</ul>
</div>
</nav>
I'm creating a responsible navigation bar using Bootstrap. Now it looks like:
in expanded view, and:
in collapsed view.
In the normal view it looks okay, however in collapsed view I'd like to keep in the bar Sign Up links and not to have it in the collapsed list. Something like this (this screenshot was created in graphical editor):
This is my code:
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar 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>
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
Fiddle: https://jsfiddle.net/aqgtmy6w/4/
I found this post but collapsed list there is broken, some links shifted left and right.
How can I achieve keeping some links in navbar on collapsing, and how to exclude them from list (so that not to duplicate them)?
Just put the sing up link inside <div class="navbar-header"> and add class="navbar-brand pull-right" to your sign up link. That's it.
Working Snippet
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#media(min-width:768px){
#sm-view {
display:none;
}
}
#media(max-width:767px){
#lg-view {
display:none;
}
#sm-view {
font-size: 14px;
}
}
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar 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>
<a class="navbar-brand" href="#">WebSiteName</a>
<a id="sm-view" class="navbar-brand pull-right" href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li id="lg-view"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
</ul>
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
To have same styling as the nav-links and not like the navbar-brand just add this--- #sm-view {font-size: 14px;} to your media query #media(max-width:767px).
I'm having a bad time with this Bootstrap menu I made, and I can't figure it out why it won't collapse, animate.
Everything works great and all, but the button doesn't work.
<!DOCTYPE html>
<html>
<header>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/lib/jquery/2.0.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="stylesheet.css" rel="stylesheet">
</header>
<body>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<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 class="collapse navbar-collapse navbar-collapse">
<ul>
<li>Home</li>
<li>Dropdown</li>
<li>Tell me More</li>
<li>Contact</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
Some help, please?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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.4/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<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 class="collapse navbar-collapse navbar-collapse">
<ul>
<li>Home</li>
<li>Dropdown</li>
<li>Tell me More</li>
<li>Contact</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
This is a working example. With the data-target=".navbar-collapse" #Peszo said it does not work. The most usefull fact would be to resize the window when using the code snippet.
Comment if you encounter any more issues. +1 if it helps.
EDIT As on demand, I have further styled the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<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.4/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top container">
<div class="container">
<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 class="collapse navbar-collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Dropdown</li>
<li>Tell me More</li>
<li>Contact</li>
<li>Login</li>
<li>Sign up</li>
</ul>
</div>
may be you are using old version jquery library file. Use latest version file.
demo
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
Try this ..
you use <a> tag after <li> tag...
<div class="container">
<div class="navbar-header navbar-inverse navbar-fixed-top">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" 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 class="collapse navbar-collapse">
<ul class="nav navbar-nav">
**<li>Home</li>
<li>Dropdown</li>
<li>Tell me More</li>
<li>Contact</li>
<li> Login</li>
<li> Sign up</li>**
</ul>
</div>