[Support request] Custom submenu styling

[Erwin]

Hello,

I have added a button and a language switch in my main menu. I did this via a separate block element (generate_after_navigation).

The language switch is a separate menu that is loaded in the block element. It should be a drop-down menu where you can easily switch to another language. I would like to style this submenu separately with css. How can I best handle this?

Thanks in advance!

[Ying]

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

[Erwin]

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;

[Fernando]

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.

[Erwin]

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.

[Fernando]

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;
}

[Erwin]

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.

[Ying]

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;
}

[Erwin]

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

[Ying]

You are welcome   🙂

[Author]

Posts