Sub-Menu Width

[andrewrosegallery]

Hi Team –

CSS question re: submenus

I have chosen to nest my navigation into one main drop-down menu (WP: Main Menu) so as to make the design of the site simple when on mobile and other responsively styled devices.

The first submenu seems to fit the text of the menu item. The second and third submenu items do not. Therefore, the text of the menu item hangs over the white box.

I will include my website’s address in a PM below.

If you could provide me with CSS for the adjustment to unlock this, then I’d be very appreciative.

I have already inspected the elements via Chrome and cannot find the exact string.

“nav .menu ul.sub-menu li > a, #top-bar nav .menu ul li > a” etc. don’t seem to get me there.

AR

[andrewrosegallery]

This reply has been marked as private.

[Swift Ideas – Ed]

Hi Andrew,

This is very likely due to the issue that there isn’t much space to the right of the menu dropdown within the grid.

That isn’t a very good menu structure to take given that on small screens the dropdowns will likely go off the screen. We could add some space to the right of the top bar items, or you could set the first submenu items to be part of the main menu bar?

– Ed

[andrewrosegallery]

Ed –

Thanks for the reply.

Didn’t get an email update like I usually do when you guys post here. Sorry for not getting back to you more quickly.

Your questions pose interesting solutions.

1. Adding more margin to the right of the top bar items might make the first-tier menu structure look unbalanced, and still not solve the problem of the truncated submenu sizes. I seem to recall there is a way to manually set the borders of those submenus via CSS, but am not good enough on inspecting elements to determine which CSS class to re-define.

2. Including submenus in the first-tier menu might not keep the organization manageable, but may solve the spacing problem if the first-tier menu has function auto-sizing for length.

Would another option be to use a different (or even new version of a) header menu structure? I’ve played with the others in the Header Options, and there is none that is able to be as minimal and elegant as this one. And speaking of new header options, I’d love to see an option in the future that allows a Super Search that just drops down instead of Welcome + SuperSearch/Text or whathaveyou. FWIW… 🙂

Your suggestions would be still most appreciated on any CSS styling code if possible.

Keep up the great work!

Andrew Rose

[Melanie – SUPPORT]

I’ll forward this to the developer to consider,

cheers

[Swift Ideas – Ed]

Hi Andrew,

Just had a thought, give this custom css a go and let me know.

nav#main-navigation .menu ul ul {
left: auto;
right: 100%;
min-width: 180px;
}

Hope that helps.

– Ed

[andrewrosegallery]

Ed –

You are a code poet.

You CSS styles the menus to sub oriented left. I switched left with right below to make the menus sub orient right.

What an elegant solution.

Thank you,

Andrew

nav#main-navigation .menu ul ul {
left: 100%;
right: auto;
min-width: 180px;
}

[Melanie – SUPPORT]

Fantastic, so glad we could help!

Thank you Ed!