This topic has 3 replies, 2 voices, and was last updated 8 years by 
-
-
Hi
I’m having a hard time trying to achieve a request from my client.
I have created a megamenu with 3 cols. All is ok so far, but my client wants the dropdown menu to be on fullwidth and the elements from the menu to be aligned with the parrent menu. If I change the megamenu width property to 100%, then the elements from the dropdown menu will float on the left side.
So, I have inserted a div wrapper on the dropdown menu. In functions.php I have added “<div class=”sub-menu-wrap> before de <ul>” like this:
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( “\t”, $depth );
$output .= “\n$indent<div class=’sub-menu-wrap’><ul role=\”menu\” class=\”dropdown-menu sub-menu”.($depth ===0?” pull-left”:””).”\”>\n”;
}
All good, the <div> appears before de <ul> with Inspect Element, but the dropdown doesn’t work anymore.
Can you help me with this?
Thanks in advance!
Hi there, the ul needs to be just after the “a” element for the dropdown to work. Maybe add it inside the ul or try adding it the classes “dropdown-menu sub-menu”
Cheers
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.Hi
Thanks for the advice. You are right. It works if I insert the <div> inside the ul. However, this is not exactly what I’m trying to achieve because the Menu Items will still go to the left side if I enter a 100% width of that div.
What I’m trying to do is something similar to http://www.poloniapalace.com/en/default.html menu items. If you can take a look at this website you will see a full width background under the dropdown-menu. The menu items are aligned with the parrent menu item, but the background has full-width 🙂
Maybe I’m missing some CSS 🙂
Cheers
I think your first solution was a good starting point and it should need some CSS based on the .open class added to the parent “li” tag
something like:COPY CODEli.menu-item.open .sub-menu-wrap, li.menu-item.open .sub-menu { display: block !important; }Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.
The forum ‘General questions’ is closed to new topics and replies.
