[Resolved] Navigation menu background within tabs

[ammgbr]

Hi,

On my homepage > first accordion (title: media) > tab > first , second and third tabs > I have navigation blocks whose background appears white against the grey background of the tab.

Is there a way to fix this so that I don’t have this white/grey outline around the navigation blocks?

[Fernando]

Hello there,

For clarity, can you provide a screenshot of the specific element you want to alter? I can’t seem to see the outline you’re referring to.

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[ammgbr]

Ofc I provided a link in the priv info

The nav block doesn’t take the background colours of the tabs block and its outline remains white

[David]

Hi there.

try this CSS:

nav.wp-block-navigation .wp-block-navigation-item__content {
    background-color: transparent;
}

[ammgbr]

EDIT: apologies for coming back to this, that solution solved the previous issues. It has nevertheless cancelled the submenu colour options I have set with CSS. Is there a way to fixed this? Thank you

[David]

Increase the specificity of your CSS like this:

nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 16px;
    color: #101010;
    background-color: #EEEEEF;
}

[ammgbr]

Hi, I do apologize I have tried that but now the submenu has a vertical white stripe on the side . I am unsure what part of the css I need to amend?

[David]

Add this CSS:

ul ul .wp-block-navigation-item__content {
    grid-column: 1 / -1;
}

[ammgbr]

EDIT: apologies, the white stripe is removed ut the on hover colour is not applied for the submenus

[David]

Phew… that navigation block is a mess lol
Glad to hear its working

[ammgbr]

EDIT: apologies, the white stripe is removed ut the on hover colour is not applied for the submenus

I agree, the nav block is really difficult to work with..

[David]

More CSS… lol :

nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background-color: #f00;
}

[ammgbr]

Hi, eventually that’s sorted now 😀

[David]

Glad to hear that

[Author]

Posts