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/
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 trying to making a responsive menu, that takes on full width in the sub's sub-menu but my problem is that it is restricted to the parent li which is 33.3%, I want my submenu of the submenu to be 100% width as well. Here is my codepen
and my code as follows
<div class="mobile-menu hidden-lg-up active">
<ul id="menu-mobile-menu" class="links-middle-group">
<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-31">About
<ul class="sub-menu">
<li id="menu-item-70" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-70">Section 1
<ul class="sub-menu">
<li id="menu-item-72" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-72">Sub section 1</li>
<li id="menu-item-71" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-71">Sub section 2</li>
<li id="menu-item-73" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-73">Sub section 3</li>
</ul>
</li>
<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33">Section 2</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41">Section 3</li>
</ul>
</li>
<li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-35">Portfolio
<ul class="sub-menu">
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42">Portfolio 1</li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43">Portfolio 2</li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44">Portfolio 3</li>
</ul>
</li>
<li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-37">Contact
<ul class="sub-menu">
<li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30">facebook</li>
<li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-65">Twitter</li>
<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34">Email me</li>
</ul>
</li>
</ul>
</div>
The menu heading of sub section 1, 2 and 3 will have it's own column, so restricting to height cannot work. Each section when clicked on will display it's own section (not demostarted in demo) I also tried position but that makes the second link portfolio jumps up and ruin the layout.Maybe I am doing it wrong?
Since your list items are 33% of the full width, the nested list at most can take up the width of its parent. Since it's 100% of 33%, you could set the width of your nested .sub-menu's to 300%.
.sub-menu .sub-menu {
width: 300%;
}
I'd also recommend creating another class name for targeting nested sub-menu's because this selector looks a bit funny.
Note: This isn't the best for maintainability since you'd need to update it whenever you added or removed list items, and it relies on an assumption of how many list items are there. Absolutely positioning the nested sub-menu within a relatively-positioned .menu-item would work best but then you'd need to know the height of the list items. Although that's a lot easier to maintain than width.
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
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>
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.