[Resolved] Centre Submenu

[Ben Foo]

Hi,

My primary menu is to the right of the screen as I’ve set.
When i hover over one of the items on that menu to get a sub menu out, I realise that it is not centralized, in the centre of the screen?
How do i get the sub menu centralized?
Thank you.

Best Regards,
Ben Foo

[Ben Foo]

Thanks for your help again.

[David]

Hi there,

so you have added CSS to make the Sub-menu horizontal, but i am not sure what you mean by centralizing it? do you have an image / example of how you want it to look?

[Ben Foo]

Yes I have made the submenu horizontal.

Just that the words in the submenu are not in the center of the screen.
They are swayed to the left side.
Is there any CSS or ways to make the words in spread out so that they look center? (as in microsoft word – center, left or right).
Now I just want words in the submenu to be neat and spread out nicely throughout the width of the page, not skewed to one side like current one.
Thank you.

Best Regards,
Ben

[David]

So you have this CSS:

body .main-navigation ul.menu > li > ul {
    width: 100%;
    left: 0 !important;
}

Update it to:

body .main-navigation ul.menu > li > ul {
    width: 100%;
    left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

[Ben Foo]

Thanks.
It centers the submenu. But some of the words that are at the side of the submenu do not show fully.
Any solutions for that?
Thank you.

Best Regards,
Ben

[David]

i edited the code to include a flex wrap, this will stop the content from escaping the edge on small screens.

[Ben Foo]

Thanks so much!

[David]

You’re welcome

[Author]

Posts