[Support request] How To Center Drop Down / Sub-Menu Under Parent Nav Item

[Chris]

In the main navigation, on Desktop.
I’ve set the width of my sub-menu to 380 pixels.
I’d like to center the drop-down/sub-menu when it appears on hover.
But it seems the only options are to float the sub-menu left or right.

Can you think of some way I can make it so the sub menu container always appears centred below the parent nav item – regardless of the width of the parent nav item??

Thanks for any input or help.

[David]

Hi there,

not easily is the answer, can i see what you have so far on your site ? And i can take a look at whats possible.

[Chris]

Thanks for the reply David.

I figure it out.

    #site-navigation ul li:hover ul {
    -webkit-transform: translate(-50%,-webkit-calc(100% + 20px))!important;
        -ms-transform: translate(-50%,calc(100% + 20px)) !important;
            transform: translate(-50%,calc(100% + 20px)) !important;
    left: 50%;

I hate using the !important property in CSS. But it seems like the build in GP CSS loads after my child theme style.css?
(I needed to override the default transform: translateY(0px);)

Either way – this gets the job done!

Thanks again!

[David]

If you want you can use the PHP snippet provided in the link below to load the child theme CSS later:

https://generatepress.com/forums/topic/set-child-theme-style-css-to-last-css-file-loaded/#post-2230450

[Author]

Posts