On my WordPress website I have used wp_nav_menu to create the navigation bar. Because of this I have limited control over the HTML, for one of the navigation links I have started styling it to be a dropdown. However, the CSS for the rest of the navigation bar is interfering with this, how can I modify the HTML so that I can separate the two?
HTML -
<nav class="site-nav">
<div class="menu-primary-menu-links-container"><ul id="menu-primary-menu-links" class="menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36">Contact</li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37">Tuition</li>
<li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-28 current_page_item current_page_parent menu-item-38">Blog</li>
<li id="menu-item-107" class="test menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-107">Gallery
<ul class="sub-menu">
<li id="menu-item-119" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-119">Animals</li>
<li id="menu-item-120" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-120">Contemporary Space Images</li>
</ul>
</li>
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-42">Home</li>
</ul>
Related
in my menu item need to change last child html can help me to change it. thanks
my html:
<ul class="sub-menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page icon-chevron-right menu-item-21">Sample Page</li>
</ul>
like this:
<ul class="sub-menu">
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page icon-chevron-right menu-item-21">Sample Page<i class="icon-chevron-right"></i></li>
</ul>
I am working on Wordpress Bootstrap 4 theme
i want to submenu like this like this submenu stay open
http://www.optus.com.au/
Keep dropdown open when parent page selected
Anyone help me in this.
my navbar code
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul id="menu-main-menu" class="nav navbar-nav><li id=" menu-item-15"="">Home<ul class="mega-dropdown-menu dropdown-menu depth_0">
<li id="menu-item-142" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-10 current_page_item active nav-item nav-item-142"><a class="dropdown-item" href="http://localhost/ajc-finance/lenders/">Lenders</a></li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-143"><a class="dropdown-item" href="http://localhost/ajc-finance/sample-page/">Sample Page</a></li>
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-144"><a class="dropdown-item" href="http://localhost/ajc-finance/sample-page/">Sample Page</a></li><li id="menu-item-145" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-145"><a class="dropdown-item" href="http://localhost/ajc-finance/services/">Services</a></li></ul><li id="menu-item-14" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-14">About Us</li><li id="menu-item-13" class="menu-item menu-item-type-post_type menu-item-object-page nav-item nav-item-13">Services</li>
The default Wordpress theme does come with submenu functionalities, you just need to style it in the way like you show in you example.
You can also use 3rd party plugin like https://wordpress.org/plugins/megamenu/
I am working on WordPress sidebar menu, I want to get link active when click on that particular link.
<ul id="menu-home" class="menu">
<li id="menu-item-10"
class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-10">
Home
</li>
<li id="menu-item-50"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50">
About
</li>
<li id="menu-item-48"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48">
Services
</li>
<li id="menu-item-47"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47">
Gallery
</li>
<li id="menu-item-49"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49">
Contact
</li>
<li id="menu-item-235"
class="menu-item menu-item-type-post_type menu-item-object-page menu-item-235">
Blog
</li>
</ul>
Add following CSS
.current_page_item {
color: #920606
}
Change hexadecimal code based on your design
I have created a WordPress site for a client, in which you filter through the navigation menu (set-up in appearance->menu) by revealing hidden items (unordered lists with class "sub-menu (generated through WordPress menu function)).
There are three hierarchal tiers; Pages>custom-links>Posts. When the page is clicked, the children (custom-links) are revealed, when a custom link is clicked, the children posts are revealed.
Then, when you are on a post, the path taken is highlighted in the navigation.
This is done through css and current/parent/ancestor classes generated with the wp_nav_menu function.
The mark-up generated by the wp_nav_menu function is this:
<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155">Design
<ul class="sub-menu">
<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152">#DesignCat1
<ul class="sub-menu">
<li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-207">DesignC1P1</li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-206">DesignC1P2</li>
</ul>
</li>
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153">#DesignCat2
<ul class="sub-menu">
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144">DesignC2P1</li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143">DesignC2P2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-156">Research
<ul class="sub-menu">
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-149">#ResearchCat1
<ul class="sub-menu">
<li id="menu-item-205" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-205">ResearchC1P1</li>
<li id="menu-item-204" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-204">ResearchC1P2</li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150">#ResearchCat2
<ul class="sub-menu">
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140">ResearchC2P1</li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139">ResearchC2P2</li>
</ul>
</li>
</ul>
</li>
</ul>
The current page being "DesignC1P1", it's assigned a class of "current-menu-item", its parent (a custom link(#DesignCat1)) assigned "current-menu-parent" and its ancestor (a page(Design)) assigned "current-menu-ancestor". So, with CSS I do:
.current-menu-item > .sub-menu, .current-menu-parent > .sub-menu, .current-menu-ancestor > .sub-menu {
visibility: visible;
display: inline;
}
.current-menu-item > a, .current-menu-parent > a, .current-menu-ancestor > a {
color: #000;
text-decoration: none;
}
Which works well, it keeps all the relevant menu items visible and highlighted in black.
My issue is that my client has specifically asked for posts to be in more than one location in the menu, IE the same post could be under Design page and Research Page, or under two different custom-links in design/research. That means the same mark up is generated for the two item locations, and both paths are shown rather than the path taken. Here is what the generated code with the "Same Post" under #DesignCat1 and #ResearchCat1 would look like:
<ul id="menu-menu-2" class="main_menu"><li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-155">Design
<ul class="sub-menu">
<li id="menu-item-152" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-152">#DesignCat1
<ul class="sub-menu">
<li id="menu-item-202" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-202">Same Post</li>
</ul>
</li>
<li id="menu-item-153" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-153">#DesignCat2
<ul class="sub-menu">
<li id="menu-item-144" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-144">DesignC2P1</li>
<li id="menu-item-143" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-143">DesignC2P2</li>
</ul>
</li>
</ul>
</li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-has-children menu-item-156">Research
<ul class="sub-menu">
<li id="menu-item-149" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-has-children menu-item-149">#ResearchCat1
<ul class="sub-menu">
<li id="menu-item-203" class="menu-item menu-item-type-post_type menu-item-object-post current-menu-item menu-item-203">Same Post</li>
</ul>
</li>
<li id="menu-item-150" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-150">#ResearchCat2
<ul class="sub-menu">
<li id="menu-item-140" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-140">ResearchC2P1</li>
<li id="menu-item-139" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-139">ResearchC2P2</li>
</ul>
</li>
</ul>
</li>
</ul>
Any ideas how to highlight only the path taken, rather than both? I know HTML,CSS and a bit of java, not so good with PHP! Any help would be greatly appreciated!
I generate a menu in Wordpress that has three layers. I do that with the code:
wp_nav_menu(array('theme_location' => 'primary', 'menu_class' => 'SecondaryNavigation'));
Wordpress generates a menu like this:
<div class="menu-mainnavigation_de-container">
<ul id="menu-mainnavigation_de" class="SecondaryNavigation">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39">
Home
<ul class="sub-menu">
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">Einführung</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">Aktuelles</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-40">
Der Tell
<ul class="sub-menu">
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-30 current_page_item menu-item-42">Beschreibung</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">Topographie</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-51">
Forschung
<ul class="sub-menu">
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53">Forschungsgeschichte</li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-52">Forschungsprobleme</li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-65">
Kampagnen
<ul class="sub-menu">
<li id="menu-item-64" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-64">
Ausgrabung 2010
<ul class="sub-menu">
<li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63">Grabungsstelle C – Haus I (Sq. 6644-5, 6744-6 & 6844-6)</li>
</ul>
</li>
</ul>
</li>
</ul>
I have to divide the menu into two menues: In the header on the top, only the first layer of the menu is visible. This is very easy with the depth-call of wp_nav_menu and works just fine.
In the Sidebar I want to display the corresponding second and third level (everything under the class .sub-menu) of the menu, depending what was selected in the header. I tried to do this via CSS with the two simple lines:
.SecondaryNavigation {
display: none;
}
.SecondaryNavigation .current-menu-ancestor .sub-menu {
display: block;
}
Unfortunately, this does not work. How can I display only the second and third level of my menu, depending on what was selected in the primary level? Wordpress assigns the corresponding classes, like .current-menu-ancestor or .sub-menu, so it must be possible in some way, right?
Thanks for your help!
All the best
Sebastian
I would simply create the secondary menus and then list on the pages accordingly, which will be quite simple and effective.
Let me know if you need further help.