Full width div wrapper on dropdown menu

[cosmin.barbu]

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!

 

[Abe]

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.

[cosmin.barbu]

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

[Abe]

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 CODE

li.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.

[Author]

Posts