How to change horizontal position of submenu items?

[ralphw]

Hello,

how can I change the position of the submenu items? They should be centered to the corresponding main menu item.

Thanks,

Ralph

[rad]

Hi Ralph,

Thanks for reaching out.

It’s only possible with custom CSS, the sub-menu is auto positioned depending on nearest corner of the screen. But you can still override it by adding this CSS to Theme Options > CSS

.masthead-inline .x-navbar .desktop .sub-menu {
    left: -55px;
    right: auto;
}

This is assuming you’re referring to the standard menu like on integrity which has a minimum width of 200px. This will not work if its width became larger than 200px, hence you need to change the -55px value accordingly. I still recommend not doing that since sub-menu may vary from each other and you would need a lot of CSS for that. And we can’t further cover any custom CSS, the provide CSS should only serve as a sample and reference.

Thanks!

[ralphw]

Hi Rad,

thank you very much.

Your solution works fine except for the 4th main menu item which still has a subnavi which is shifted to the left.

How can I influece this element individually?

I put the access to my site in the secure note and would be very grateful if you could have a further look.

Regards,

Ralph

[ruenel]

Hello Ralph,

Thanks for providing the information. To make sure that they are at the center, please have the code updated and use this instead:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: 50%;
    right: auto;
    margin-left: -100px;
}

If you want to style the submenus individually, you will need to get the parent menu item id just like this:

.masthead-inline .x-navbar .desktop .menu-item-123  .sub-menu {
    left: 50%;
    right: auto;
    margin-left: -100px;
}

Wherein 123 in the class .menu-item-123 is the menu item ID. To find the menu item ID, please right click on the page on your site and select “inspect element” and scroll down until you find code like this.

You can also go to Appearance > Menus and hover your mouse pointer over the Remove or Cancel link for each menu item.

You might find this links helpful:

CSS Selector Reference
How to find the css selector in chrome

Hope this helps. Please let us know how it goes.

[ralphw]

Hello & thank you - this works very well!

Regards,

Ralph

[friech]

You’re more than welcome, glad we could help.

Cheers!