Align Submenu Items Under Main Menu

Support
#1

Hi there,

I’m working on my site in staging and am having trouble aligning the sub menu items centrally underneath the main menu options above.

I’ve looked at other support requests for similar tweaks but just don’t seem to be able to find the right code.

I have been playing around with the following but am having no success:

#menu-item-109 .sub-menu { right: 0%; }
#menu-item-89 .sub-menu { right: 0%; }
#menu-item-88 .sub-menu { right: 0%; }
#menu-item-142 .sub-menu { right: 0%; }

Thanks in advance for your suggestions.

#2

Hi There,

Thanks for writing in!

please try this CSS and let me know.

.x-navbar .x-nav .sub-menu a {
text-align: left;
}

Hope this helps!

#3

Thanks for your reply.

That code just left aligns the text - and it doesn’t actually align with the left edge of the main menu item. I’ve left the code in so that you can see.

I would like the sub menu to sit centered underneath the main menu headings so that the sub menu looks like a drop down extension of the main menu not something that sits off to one side.

Thanks again for your help.

#4

Hi There,

To center the sub-menu under the main menu item, please try with this custom CSS instead:

.masthead-stacked .x-navbar .desktop > ul > li > .sub-menu {
    left: 50%;
    margin-left: -125px;
}


In case you want to learn CSS please watch the videos below.


Thanks

#5

Hi, thanks for your reply, however that code only aligns the sub menu underneath the ‘Gallery’ menu item. All the others are still off centre.

My site is now live at matthewpenn.com

Is there any way to get the sub menu options to centre align?

Thanks in advance.

#6

Hey @charlimoore,

Update the code given previously to this

.masthead-stacked .x-navbar .desktop > ul > li > .sub-menu {
    left: 50%;
    transform: translateX(-50%);
}

Hope that helps.

#7

Great thanks, that works perfectly.

#8

You’re welcome.

#9

@christian_y sorry one more question, I have mirrored that code onto another site I have using the same design and it hasn’t responded in the same way?

Do you know why this might be?

Thanks in advance

#10

Hello @charlimoore,

Thanks for updating the thread. :slight_smile:

Actually the code is working fine but you need to make few subtle changes into the values. Please try following code:

.masthead-stacked .x-navbar .desktop > ul > li > .sub-menu {
    left: 60%;
    transform: translateX(-30%);
}

Thanks.

#11

Hey @Prasant thanks for your reply. I’ve tweaked the code as suggested but it doesn’t work for both menus (About and Projects) - any advice?

Thanks in advance.

#12

Hi again,

Please replace the previous code with the following one:

.masthead-stacked .x-navbar .desktop > ul > li > .sub-menu {
    left: 50%;
    transform: translateX(-50%);
}

.masthead-stacked .x-navbar .desktop > ul > li > .sub-menu li a {
    text-align: center;
}

Let us know how this goes!

#13

Brilliant, thank you!

#14

Glad we were able to help :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.