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
Related
*<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">
put home on the right side of navbar then product and other menu items but with the folowing code it shows them in reverse order that i need
<form id="form1" runat="server" >
<div>
<div class="navbar navbar-default 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 navbar-right" href="Index.aspx"><span>
<img alt="Logo" src="Image/weather.png" height="30" /></span>Company name</a>
</div>
<div class="navbar-collapse collapse " >
<ul class="nav navbar-nav navbar-right" >
<li class="active navbar-nav ">home</li>
<li>products</li>
<li>contacts</li>
<li>users</li>
</ul>
</div>
</div>
</div>
</div>
I think what you want to achieve is this--
Just reverse the <li > order
code snippet
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
</style>
</head>
<body>
<form id="form1" runat="server" >
<div>
<div class="navbar navbar-default 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 navbar-right" href="Index.aspx"><span>
<img alt="Logo" src="Image/weather.png" height="30" /></span>Company name</a>
</div>
<div class="navbar-collapse collapse " >
<ul class="nav navbar-nav navbar-right" >
<li>users</li>
<li>contacts</li>
<li>products</li>
<li class="active navbar-nav ">home</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
This is my code for navbar it works with desktop but when i go with responsive the menu links does't work . i click on menu and nothing happen please help.
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a id="header-logo" href="index.php" class="navbar-brand"><img class="margin-top" src="images/logo.jpg" alt=""></a> </div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Contact</li>
<li style="background-color: #cc1b47;">805-305-2630</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
`
Check this snippet..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<header class="header">
<div class="header-nav">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-slide show-menu" style="background-color:#7c3a1c;">
<div class="container">
<div class="navbar-header">
<button aria-controls="navbar" data-target="#navbar" data-toggle="collapse" class="navbar-toggle collapsed" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
<a id="header-logo" href="index.php" class="navbar-brand">
<img class="margin-top" src="images/logo.jpg" alt="">
</a>
</div>
<div class="navbar-collapse collapse" id="navbar" aria-expanded="false" role="menu" style="height: 1px;">
<ul class="nav navbar-nav style2 navbar-right">
<li>Home
</li>
<li>About Us
</li>
<li>Gallery
</li>
<li>Contact
</li>
<li style="background-color: #cc1b47;">805-305-2630
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
I want to change the navbar-brand so that the two words are two separate colors. I am having trouble doing that at the moment as no matter what CSS I use it doesn't seem to change the color. The padding I used does take effect so it is targeting it, just not changing the color. Could anyone help me with what I need to do?
<nav class="navbar navbar-inverse navbar-fluid" role="navigation">
<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="#"><div class="translation">TRANSLATION</div><div class="commons">COMMONS</div></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>
Home
</li>
<li>
Register
</li>
<li>
Log In
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Donate
</li>
</ul>
</div>
</div>
Use SPAN and assign a color.
.red {
color: red;
}
.white {
color: white;
}
<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.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-fluid" role="navigation">
<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="#"><span class="red">TRANSLATION</span> <span class="white">Commons</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav nav pull-right">
<li>Home
</li>
<li>Register
</li>
<li>Log In
</li>
<li>About
</li>
<li>Contact
</li>
<li>Donate
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
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>