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.
Related
here is code what I want to achieve by WordPress custom dropdown but I can't, can anyone tell me how can I do that, and other menu items should be normal and simple
[![<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="products.html">Products <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#">
<div class="img">
<img src="images/dropdown-img.jpg" alt="">
</div>
<span class="title">Cable &<br> Cable Accessories</span>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown" href="service.html">Service</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#">
DEMO
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html">Contact</a>
</li>
</ul>][1]][1]
I needed a selector that doesn't collapse alongside the rest of the menu in a bootstrap v4 navbar. Got something working, too. See below.
It's a bit hacky as there are actually two language selectors, but one is hidden when the browser window is smaller than the lg-breakpoint in bootstrap. Opposite way round if it is larger than the lg-breakpoint obviously. It works fine - but there might be a more elegant way to do this.
What I don't like is that, when the nav collapses, clicking on the language selector expands the navbar by the height of the dropdown list. Obviously it has to as the language selector is wrapped in the collabsed "nav" - but I'd much rather it'd behave as it does with the lg and wider selector - there the dropdown extends beyond the navbar without changing the size of the navbar.
Is there any way around this?
See these images:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<!--navigation-->
<nav class="navbar sticky-top navbar-dark navbar-expand-lg">
<a class="navbar-brand" href="#">Page Title</a>
<!--language selector for collapsed menu [hidden when viewport larger than medium]-->
<div class="d-lg-none ml-auto">
<ul class="navbar-nav">
<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">🌐 Language</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</li>
</ul>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<div class="navbar-nav">
<!-- page user is looking at = "nav-link active"-->
<a class="nav-item nav-link active" href="#">Home<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Link 1</a>
<a class="nav-item nav-link" href="#">Link 2</a>
<div class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">The Team</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Link</a>
<a class="dropdown-item" href="#">Another Link</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">An entirely different link</a>
</div>
</div>
<a class="nav-item nav-link" href="sponsor_us.php">Link 3</a>
<a class="nav-item nav-link disabled" href="#">inactive Link</a>
</div>
</div>
<!--language selector for expanded menu [hidden viewport size medium and down]-->
<div class="d-none d-sm-none d-md-none d-lg-block d-xl-block ml-auto">
<ul class="navbar-nav">
<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">🌐 Language</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</li>
</ul>
</div>
</nav>
Edit: Here's a jsfiddle link - albeit for some reason that one doesn't use the bootstrap.css file I'd added in the resources. So the menu is white, not black :). You have to change the width of the window that displays the html to see the menu expanding and collapsing.
I know this is old, but this was the ONLY place I'd found this question asked.
Simple way:
css: .popout { position: absolute !important;}
now add popout class to you div that you no longer want to remain inside the navbar while the navbar is collapsed!
<style>
.popout { position: absolute !important;}
</style>
<html>
...
<div class="dropdown-menu dropdown-menu-right popout" ...>
<a class="dropdown-item" href="#">Language 1</a>
<a class="dropdown-item" href="#">Language 2</a>
<a class="dropdown-item" href="#">Language 3</a>
</div>
</html>
When viewing this from xs or sm viewport/screen sizes, and then clicking on my navbar toggler, it's pushing all the content, INCLUDING the header that the navbar-toggler is in, down the page to make room for the dropdown menus.
This appears to be different from Bootstrap 3 (as well as Bootstrap 4 alpha 5).
Any thoughts on how to stop doing this?
Here's the site to test...
https://test.wrestlestat.com/rankings/dual
Here's the code:
<button class="navbar-toggler d-md-none" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
#*<li class="nav-item"><a class="nav-link" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual Comparison</a></li>*#
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="comparisonDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="comparisonDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Dual/Team</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetWrestlerComparisonSelectLink()">Wrestler</a>
#*<div class="dropdown-divider"></div>*#
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.ComparisonRoutes.GetDualComparisonSelectLink()">Perma</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="rankingsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Rankings
</a>
<div class="dropdown-menu" aria-labelledby="rankingsDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetWrestlerRankingsAllLink()">Wrestler</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetDualRankingsLink()">Dual</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.RankingRoutes.GetTournamentRankingsLink()">Tournament</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="fantasyDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Comparisons
</a>
<div class="dropdown-menu" aria-labelledby="fantasyDropdown">
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.PickEmRoutes.GetFantasyThisWeekLink()">Pick'Em</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyPoolRoutes.GetTourneyPoolHubLink()">Tourney Pool</a>
<a class="dropdown-item" href="#WrestleStat_v3.Core.Constants.Route.TourneyProjectionRoutes.GetTourneyProjectionLink()">Tourney Projection</a>
</div>
</li>
</ul>
</div>
Why it happens?
The class sticky-top gives your navbar a position: sticky; which acts as a block element when you haven't scrolled yet. So when your navbar gets expanded it pushes all other block elements down.
Fix1 - pushes normal content down
Put this div: <div class="navbar-collapse collapse" id="navbarSupportedContent" style>...</div> at the end of your <nav>...</nav>, or above your input if you want the searchfield to be under the collapsed navbar.
Fix2 - doesn't push anything down
First do Fix1, then in your CSS add .sticky-top { position: fixed !important; }, Only do this if your not using sticky-top anywere else!, because when you don't scroll it acts like a block element so pushes its other content down. Also add some margin to your first container-fluid so its under the header again (cause the now fixed element doesn't take up space anymore) for example add classes pt-5 and mt-5 to them.
I'm trying to populate a drop down menu using UI Bootstrap's uib-dropdown and ng-repeat but only the last record in the array is being populated.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
<li>{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
I've confirmed that TN.resourceList has 3 records.
If I remove: class="dropdown-menu"
from: <ul ng-repeat="resource in TN.resourceList" class="dropdown-menu">
then all the records display but it no longer renders as a drop down menu.
I also tried adding the uib-dropdown-menu directive to the <ul> with the ng-repeat on it as well as the role attributes as suggested in this answer: Bootstrap Dropdownlist Issue in angular JS
But it had no effect.
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Notice the ng-repeat on the li instead of the ul dom element (ng-repeat repeats elements where it added to and it's childeren).
You're repeating the dropdown-menu itself. You should have one dropdown-menu and repeat the li instead:
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-class="{active: isActive('/resources/')}" class="dropdown" uib-dropdown>
<a uib-dropdown-toggle class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Resources <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="resource in TN.resourceList">{{ resource.ResourceText }}</li>
</ul>
</li>
</ul>
</div>
Easiest answer is to consider looking at the ng-repeat itself as a loop. Within normal html, you wouldn't want to have multiple lists or 'ul' tags would you? You would want one list with multiple entries or 'li' tags.
Consider the answers above as direct answers, but realistically, you should be able to look at your code and figure out that you want to repeat the list entries and not the list itself.
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.