I am using bootstrap 3.3.7 and i have a navbar. Everything is fine but when i click the dropdown menu item i am unable to see the sub-menu. below is my code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"/>
</div>
<ul class="nav navbar-nav">
<li>
View Library
</li>
<li>
Create
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="true">Setup<span class="caret"/>
</a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li>
Our Story
</li>
<li>
Our Team
</li>
<li>
Contact Us
</li>
</ul>
</li>
</ul>
</div>
</nav>
What am i doing wrong here. please guide me.
You might forget to add js for bootstrap. please add this to your index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
Try this one,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<ul class="nav navbar-nav">
<li>View Library</li>
<li>Create</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="true">Setup<span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li>Our Story</li>
<li>Our Team</li>
<li>Contact Us</li>
</ul>
</li>
</ul>
</div>
</nav>
Related
I am having an issue with my bootstrap 3 dropdown menu, specifically when its on the hamburger version of the menu. The following actions are happening:
Once a menu item is selected, all items in the ul remain highlighted, the next time you open the menu.
When the page is viewed on a mobile device, the menu doesnt disappear once a menu item is selected.
I have tried a couple of different scripts, similar to this Github topic but I thinks I am placing the script in the wrong place. I have made a few different changes to try get it to work but I cant figure it out. I have taken the source from w3schools topic.
Any help would be greatly appreciated to fix this issue.
Thanks in advance.
Here is the navbar code I am using:
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Had to add some jQuery to it, and it worked.
Will make slideUp transition smoother as soon as I get the chance.
Just adding and removing few classed worked.
And on toggle, you get the removed classes back. So not to worry about that.
Place the below code in your html before your <html>
<script>
JqUery text
</script>
$(".dropdown-menu").click(function() {
$(".navbar-collapse").removeClass("in");
$(".navbar-toggle").addClass("collapsed");
});
<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"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top" id="myNavBar">
<div class="container">
<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 href="#Home">
<img src="images/home.png" alt="Logo" width="275" height="50">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 1</a>
<ul class="dropdown-menu">
<li>Section 1.1</li>
<li>Section 1.2</li>
<li>Section 1.3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 2</a>
<ul class="dropdown-menu">
<li>Section 2.1</li>
<li>Section 2.2</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
I'm trying to integrate a custom theme for bootstrap
the theme i want to use is bootswatch
the only problem i'm currently facing is that the dropdown menu in the navigation bar is not working.
this is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
<html>
<head>
<title>Login</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet">
<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>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I use bootstrap 4.3.1 instead of 3.3.7 to fix this problem.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Maybe you can try it.
I have a problem with the navbar when displayed on a smartphone.
The last item of the menu is a dropdown. It is not displayed unless I enlarge the screen. It is as if there was no more space to display the items of the submenu (while the other dropdwons work perfecty).
Could somebody tell me what mistake I did ? Here is the code:
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a><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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown">
Contatti
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
Thank you very much in advance
gabriele
Your code works:
https://jsfiddle.net/8c8x558e/
I think the problem would be your bootstrap links, remember you have to put these links:
<!-- 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>
I think you forgot the Js link.
Remove this css in mobile view .navbar-fixed-top {position: fixed;}
you can use {position: static;}
Also use class="caret" where the is a sub-menu to make sure there is a sub-menu I used it after the text "Contatti". For any question ask me in comment. LiveONFiddle :)
<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>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<a class="pull-left"><img src="logo_navbar.png" alt="logo"></a>
<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="#"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
Associazione
<ul class="dropdown-menu">
<li>
Chi siamo
</li>
<li>
Struttura
<li>
Statuto
</li>
</ul>
</li>
<li class="dropdown">
Bilancio Sociale
<ul class="dropdown-menu">
<li>
Bilancio 2015-2016
</li>
<li>
Bilancio 2014-2015
</li>
<li>
Bilancio 2013-2014
</li>
<li>
Bilancio 2012-2013
</li>
</ul>
</li>
<li>
Gara di matematica
</li>
<li>
News
</li>
<li>
Rassegna stampa
</li>
<li>
Iscrizione
</li>
<li class="dropdown dropdown-submenu">
Contatti <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Messaggi
</li>
<li>
Dove siamo
</li>
<li>
Newsletter
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!--/.nav-collapse -->
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
I have created a navbar containing a dropdown menu. When i click header, simply nothing happens.
Here is my code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toogle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
There is no error in the console.
It's a simple typo: You have data-toogle instead of data-toggle.
It should work with this:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
Customers
<span class="caret"></span>
</a>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand icon-github" href="/"> </a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
Coustomers <b class="caret"></b>
<ul class="dropdown-menu">
<li>All Customers</li>
<li><Recently added</li>
<li>Today's appointments</li>
<li class="divider"></li>
<li>Create new customer</li>
</ul>
</li>
</ul>
</div>
</div>
If I am not wrong this is what you are looking for..
I am trying to make a 3-level collapsing navbar menu for Bootstrap, but I can't open the third level.
This is the two level menu which I have:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<a class="brand" href="#">Present Ideas</a>
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li>Register</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
I thought something like this would work:
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Blog</li>
<li>About</li>
<li>Help</li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Account Settings<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Login</li>
<li class="item-148 dropdown parent">
Learn more <b class="caret-right"></b>
<ul class="dropdown-menu">
<li class="item-149">The Software</li>
<li class="item-150">The Project</li>
<li class="item-151">The Leadership</li>
<li class="item-152">Open Source Matters</li>
</ul>
</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
But that's not working.
Bootstrap 2.3.x and later supports the dropdown-submenu..
<ul class="dropdown-menu">
<li>Login</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
<li>Logout</li>
</ul>
Working demo on Bootply.com
Bootstrap 3 dropped native support for nested collapsing menus, but there's a way to re-enable it with a 3rd party script. It's called SmartMenus. It means adding three new resources to your page, but it seamlessly supports Bootstrap 3.x with multiple levels of menus for nested <ul>/<li> elements with class="dropdown-menu". It automatically displays the proper caret indicator as well.
<head>
...
<script src=".../jquery.smartmenus.min.js"></script>
<script src=".../jquery.smartmenus.bootstrap.min.js"></script>
...
<link rel="stylesheet" href=".../jquery.smartmenus.bootstrap.min.css"/>
...
</head>
Here's a demo page: http://vadikom.github.io/smartmenus/src/demo/bootstrap-navbar-fixed-top.html