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..
Related
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>
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 navbar in a desktop site, but I want it in mobilesite like a sidebar.
How to convert the navbar to sidebar in the mobile site?
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Site name
<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="home">Home <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>page 1</li>
<li>page 2</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>username</li>
</ul>
</div>
</div>
</div>
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