Sub-Menu Width – swiftideas

swiftideas

ATTENTION, PLEASE READ: New topic creation is disabled, as we have moved to a new support system. Your existing topics will remain, but for all new requests you will need to use the new system. Click here to go to the new support request form.

This topic has 7 replies, 3 voices, and was last updated 10 years by Melanie – SUPPORT.

Viewing 8 posts - 1 through 8 (of 8 total)

Back to forum

Posted in: Neighborhood
January 2, 2014 at 11:53 pm #39960

andrewrosegallery
Member

Post count: 12

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

January 2, 2014 at 11:53 pm #39961

andrewrosegallery
Member

Post count: 12

This reply has been marked as private.

January 4, 2014 at 2:50 pm #40302

Swift Ideas – Ed
Keymaster

Post count: 15264

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

January 15, 2014 at 1:22 am #42521

andrewrosegallery
Member

Post count: 12

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

January 16, 2014 at 9:49 am #42882

Melanie – SUPPORT
Member

Post count: 11032

I’ll forward this to the developer to consider,

cheers

January 17, 2014 at 12:11 am #43099
Swift Ideas – Ed
Keymaster

Post count: 15264
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
January 20, 2014 at 11:30 pm #43660

andrewrosegallery
Member

Post count: 12

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;
}

January 24, 2014 at 8:16 am #44434

Melanie – SUPPORT
Member

Post count: 11032

Fantastic, so glad we could help!

Thank you Ed!
Back to forum

Posted in: Neighborhood