Archived topic

How To Center Drop Down / Sub-Menu Under Parent Nav Item

3 replies · Started by Chris on March 18, 2023

Viewing posts 1–4 of 4

March 18, 2023 at 11:56 pm #2572725

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.

March 19, 2023 at 9:43 am #2573188

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.

March 19, 2023 at 3:38 pm #2573417

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!

March 20, 2023 at 1:06 am #2573696

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

This archived topic is closed to new replies.

Start building better websites today.