Inline Navigation Menu Fullwidth Submenu/Dropdown

[sguilliard]

Hi,

I’m looking for pointers (rather than spend hours looking through the source code) on setting the width of the submenu/dropdown of the inline navigation menu in Pro (.sub-menu .x-dropdown) which seems to be overridden by some JS? I’m unable to set the sub-menu ul to be wider than the parent li which is starting to annoy me (I thought this would be a simple thing to do)

I would expect that some CSS such as the following would have allowed me to achieve what I wanted:

position: absolute;
display: block;
width: 100%;
height: 45px;
position: absolute;

However, even though the menus are built with flexbox, assigning something like flex: 1 0 100% doesn’t work either.

Hence my suspicion that some JS is involved (either that or I’m being blind to the obvious, which I will no doubt notice as soon as I’ve posted this ).

I’d be really grateful for someone ‘in the know’ pointing me in the direction of the files concerned…

[kory]

Howdy, @sguilliard!

Thanks for writing in! The width of the dropdowns in Pro are not overwritten by JS, they take a direct CSS unit. The “issue” here lies with the fact that when you tell something to be 100% wide in CSS, you’re always working relative to the immediate parent container’s width.

This is slightly different with absolute elements such as the dropdown. Instead of the immediate parent element, it’s the nearest relative element that is used as the containing element where we get our relative widths from. In the case of the menus in Pro, that would be the <li> that contains the primary item link as well as the dropdown for any sub links.

So the reason why the dropdown doesn’t get larger than the parent <li> is because it is the relative container to the dropdown, so using percentage widths on the dropdown will always be relative to that <li> width.

If you need a “fullwidth” dropdown that goes across the entire width of a bar, I’d recommend utilizing UberMenu (an included Extension), which features plenty of options to achieve a look like this. To do so, you could place a Content Area into a bar and drop in a shortcode and get the output how you need it.

Hopefully this helps to point you in the right direction. Cheers!