When I open up the dropdown menu, only the Home tab is clickable. The rest act like regular text...
<nav class="navbar">
<ul class="nav navbar-nav ">
<li class="aktivan">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Cakes</li>
<li>Muffins</li>
<li>Coffee</li>
</ul>
</li>
<li>About us</li>
<li>Orders</li>
</ul>
</nav>
Removing the href="#" from the dropdown-toggle should fix it
To keep URLs intact with link buttons, use the data-target attribute instead of href="#"
dropdowns via data attributes
I believe the href attribute is assigning the target # for the dropdown causing it not to work.
Related
This is a code for a part of navbar I am trying to make. For the "our tracks" section, I have a link for it, but it doesn't open because clicking on it opens the drop-down menu. I want this menu to open only when it is hovered on, not clicked on.
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">About
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle"
href="our%20tracks.html">Our Tracks<b> class="caret"></b></a>
<ul class="dropdown-menu">
<li>Robotics</li>
<li>Automation</li>
<li>Programming</li>
<li class="divider"></li>
</ul>
</li>
</div>
Then you got to write your own custom JQuery code to overwrite the default bootstrap behavior, like so:
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});
I'm working on a project with bootstrap. I just included a sub menu in the pills navbar but it doesn't work. When I click on messages nothing happens
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Home</li>
<li role="presentation">Home</li>
<li class="dropdown" role="presentation">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">About</a>
<ul class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li>Trash</li>
</ul>
</li>
<li role="presentation">Users</li>
<li role="presentation">Messages</li>
<li role="presentation">Contact</li>
</ul>
Any help with the script above. Thanks
See how data-toggle="dropdown" is in the anchor tag for About? It appears that you have the dropdown menu under About, not Messages.
Also, be sure to include the Bootstrap JavaScript. There should be a tag like <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> in the <head> section of your HTML. This is what enables the dropdown to work.
I have the following bootstrap menu, the last item in this menu is "More" which is a dropdown contains the left items from that menu, the problem is when user minimize the window the last items start hiding include "More" item.
So my question is: how to avoid the last item ("More") from being hide?
I searched the internet I could not find any solution, I found many are talking about pull left but it did not work for me.
Here is my code:
<div class="collapse navbar-collapse " id="category-navbar-collapse-1">
<ul class="nav navbar-nav ">
<li >
a
</li>
<li >
b
</li>
<li >
c
</li>
<li >
d
</li>
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown">
More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
Any suggestion please?
Feel free to ask for more information.
I'd check the styles over - could be some class name with a breakpoint for display:none on that class. Have a look in Devtools and see what it's throwing out?
As far as your code goes, it looks fine so just check over the CSS, positioning and display, etc.
<div class="collapse navbar-collapse" id="category-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">More
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
#Html.Action("GetMoreCategories", "Items")
</ul>
</li>
</ul>
</div>
With my HTML code I have created a dropdown menu within a tab. I need to add content to those individual "tabs" in the dropdown menu. I need help linking those together.
<div class="container">
<ul class="nav nav-tabs">
<li class="active tab_class" style="background: #009933"><a data-toggle="tab" href="#about">About</a></li>
<li class="dropdown">
<a class="dropdown-toggle" style="background: #009933" data-toggle="dropdown" href="#">Teaching
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Submenu 1-1</li>
<li>Submenu 1-2</li>
<li>Submenu 1-3</li>
</ul>
</li>
<li class = "tab_class" style="background: #009933"><a data-toggle="tab" href="#research">Research</a></li>
</ul>
</div>
This is currently what my code looks like creating the tabs. How can I correctly use classes and href to add content to each subtab within? I am thinking I may not have correctly made subtab's active, but i'm also not sure how to go about doing that. I am also using bootstrap within HTML and have that correctly imported.
Any help would be appreciated! Thanks
I am trying to build my first website using the bootstrap template and I cannot get the dropdown button in the nav bar to show anything or open. It will display everything the way I want it, but the "open" function of it isn't working properly for some reason.
Here is what I have in the HTML part:
<li div class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
(I haven't updated all of the target links yet, for now most of them just show as a #)
and for the CSS I have:
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
Please help!
Error in your code <li class="dropdown"> try this code
Your page does not include necessary js files so insert tis line in section
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
HTML
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
Example Markup
<!-- start: User Dropdown -->
<li class="dropdown">
<a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>
Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li></i> Change Password</li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
<!-- end: User Dropdown -->