I am designing a custom bootstrap wordpress theme. I have used wp-bootstrap-navwalker for nav menu and did exactly how it has been mentioned. but still, "Engineering Services" and "Products" dropdown is not working at all! Please save me!
the site is http://mywp.net84.net/
<ul class="nav" role="navigation">
<li class="dropdown"> <a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul
class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li><a tabindex="-1" href="http://google.com">Action</a>
</li>
<li><a tabindex="-1" href="#anotherAction">Another action</a>
</li>
<li><a tabindex="-1" href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">Separated link</a>
</li>
</ul>
check in jsfiddle
make sure include appropriate id in the list.
Related
Here is the html structure:
<div class="collapse navbar-collapse main-menu-item justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav align-items-center">
<li class="nav-item"><a class="nav-link" href="/index.php"><i class="ti-home"></i></a></li>
<li class="nav-item"><a class="nav-link" href="/page2.php">Page 2</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="/news/blog.php">Blog</a>
<a class="dropdown-item" href="/news/press.php">Press</a>
</div>
</li>
</ul>
</div>
I was able to display the menu through wp. But one point still needs to be fixed: the dropdown. Any idea about what I should do?
How to display the li, div and a dropdown classes through the menu?
The dropdown menu appears on the page but should be hidden until I make hover on it, doesn't it?
Should I use Jquery to do this or is it through a wp function? I am a bit lost.
Thanks for your help.
An MVC4 Bootstrap example app shows bullet points placed way ahead of the navigation menu items on the navigation bar. separated by brand, even. The bullets appears to be related to tags CSS. Does any one have a clue about removing the bullets? The menu is displayed by navigationextension.cs
<div class="nav-collapse collapse">
#Html.Navigation()
</div>
You should be able to target the list item (.nav-collapse .li) with the following CSS property:
list-style-type: none;
you can also add class="list-unstyled" to the ul to remove all the bullets.
Removes all default list-style (bullets, left margin, etc.) styling from a or list.
https://www.w3schools.com/bootstrap4/bootstrap_ref_all_classes.asp
In case others arrive with a similar issue in Edge with .dropdown-menu
/* Edge fix */
.dropdown-menu,
.dropdown-menu ul {
list-style-type:none;
}
Note: The 2nd selector covers our custom multi-column dropdowns and can be ignored 😉
Add navbar-nav dropdown to the class
Try adding style none to li class <li class="nav-item" style="list-style-type: none;" >
I had the same problem with bullets, plus the <li> elements where invading each other spaces. I solved it by assigning the "nav" class to the <ul> element instead of the "navbar" class I was using.
This is a sample of the working list of elements:
<ul class="nav navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
And this a sample of the list of elements showing up with bullets and overlapped:
<ul class="navbar navbar-nav">
<li>Recipes</li>
<li>Shopping List</li>
</ul>
This is working at least with Bootsrap version 3.
I found the explanation for this is at the treehouse page: What's the difference between nav and navbar?
Simply add the "list-unstyled" to the class of the <li> element.
For example, change this:
<li class="nav-item dropdown">
to this:
<li class="nav-item dropdown list-unstyled">
Example from bootstrap docs
This has a random dot:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
The only change is I added list-unstyled and there's no dot anymore!
<li class="nav-item dropdown list-unstyled">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
With Boostrap 3.2: when using navbar-right on a two different dropdown menus, they overlap slightly. The code below is directly from the Dropdown examples on the Bootstrap site, modified so there are two dropdowns on the right instead of one.
Note the JSFiddle snippet below. Make sure the Result window is wide enough to see the navbar, and then mouse over Dropdown 3 and 4. You'll see their borders overlap.
Any suggestions on how to work around this?
http://jsfiddle.net/codespelunker/ysqjt7fv/2
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a>
</li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a>
</li>
</ul>
</li>
</ul>
Ha so the issue was a small one. But the problem is when you are declaring your 2nd navbar-right div.
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown"> Dropdown 4 <span class="caret"></span>
// This one was for dropdown 4
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
.
</ul> <-------------------------------------- here
<ul class="nav navbar-nav navbar-right"> <--- is the problem
//This one was for dropdown 3
<li id="fat-menu" class="dropdown"> Dropdown 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a>
</li>
.
</ul>
</li>
</ul>
Take out those two lines and you should have them not over lap AND in the right order
Check out the fiddle
The issue was that you were having them both being pushed to the right as separate divs. Instead of having one div push them to the right.
You can add this style
#navbar-example .navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
http://jsfiddle.net/ysqjt7fv/5/
I am manually including the bootstrap 3.1.1 files in my meteor project and styling is fine. When I put the code below in bootply it works but when using in my meteor app, I see the 'dropdown trigger' link but but clicking it does nothing?
<div class="dropdown">
<a data-toggle="dropdown" href="#">Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Action</a></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Another action</a></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Something else here</a></li>
<li class="divider" role="presentation"></li>
<li role="presentation"><a tabindex="-1" role="menuitem" href="#">Separated link</a></li>
</ul>
</div>
argh!! I see now that I had both bootstrap.js and bootstrap.min.js files, removing bootstrap.js solved my problem. Sorry I missed that.
If you are using Iron Router try to delete href attribute from dropdown trigger:
<a data-toggle="dropdown">Dropdown trigger</a>
And add cursor pointer to a tag in your CSS:
a { cursor: pointer; }
I'm starting to experiment with Bootstrap, but I'm not able to get the js dropdown function working the way it does in their doc.
The code I'm using is source from one of the example dropdown nodes on their own site.
data-toggle="dropdown" is used on the links, and everything is as they say it should be. Anyone with a fresh set of eyes and more experience know whats going on? http://cssdeck.com/labs/pipw6ahd
<link class="cssdeck" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown open">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script>
I think that you have a typo in the way you are including the bootstrap JS. Have a look at <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.jss"></script> and notice that you have .jss for the extension and also... the reason the link starts with // (double slash) is because it's missing the http: or https: protocol and they leave it off so you can add it.
You also forgot to include jQuery (it's a must for bootstrap's JS to work) and make sure you include it above the bootstrap JS or it won't work.
Here's a fiddle of the bare bone dropdown working with everything included.
The Fiddle
HTML
<div class="dropdown">
<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >Dropdown trigger</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li>Item One</li>
<li>Item Two</li>
</ul>
</div>
I just had the same issue in Bootstrap 3.3.2, that dropdowns weren't working.
I had included an older version of jquery (1.3) which doesn't work with bootstrap, I got this hint while looking at Firefox Webdeveloper Tools (F12) in Console and JS option enabled.
"Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher"
Removing this jquery include resolved my issue.
here is working demo
html
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
include css bootstrap.css
include js:: Jquery Library and bootstrap-dropdown.js