Custom submenu styling

Hi Erwin,

You can use this selector to style the submenu of the language switcher:
.gb-container-d898d255 .wp-block-navigation__responsive-container .wp-block-navigation-link a

Hi Ying,

Thank you for your reply. I have tried that selector. Can you please check again? You will see the problem.

I gave it this style; background:red; border-radius:5px; max-width:20px;

Hi Erwin,

Can you try adding this through Appearance > Customize > Additional CSS?:

.inside-header.grid-container nav[aria-label="languages"] ul.wp-block-navigation__container >li > ul.wp-block-navigation__submenu-container {
min-width:unset;

}

.inside-header.grid-container nav[aria-label="languages"] ul.wp-block-navigation__container >li > ul.wp-block-navigation__submenu-container > li a.wp-block-navigation-item__content {
    max-width:unset;
}

This code addresses the issue in terms of the width of the Language picker.

Let us know how it goes.

Thanks Fernando!

It looks like there is still a white area behind it.

It might be good to explain what the purpose is. I want the dropdown menu to be exactly the same width, have a border radius of 5px and be right below it.

I see. Try adding this CSS:

.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
    width: 100%;
    border: none;
    background-color: unset;
}

.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container > li > a {
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    justify-content: center;
    border-radius: 10px;
}

.gb-container.gb-container-ac562a45 {
    position: relative;
}

.gb-container.gb-container-ac562a45 :is(.wp-block-navigation,.wp-block-navigation__responsive-container,.wp-block-navigation__responsive-dialog,.wp-block-navigation__responsive-close,.wp-block-navigation__responsive-container-content,.wp-block-navigation-item ) {
    position: unset;
}

I replaced it in its entirety. It's not quite working yet.

I also notice that you see the submenu on hover, but when you want to click on it, it disappears.

but when you want to click on it, it disappears.

Try adding this CSS:

.gb-container.gb-container-ac562a45 ul.wp-block-navigation__container > li:before {
    content: "";
    position: absolute;
    bottom: -30px;
    top: 20px;
    left: 0;
    right: 0;
}

Thanks guys! Thank you for your help, it works perfectly!

You are welcome   :)