[Resolved] Navigation block – CSS styling

[ammgbr]

Hello,

I have used the navigation block to insert multiple menus within my context.
I wanted to have a central means of changing the menu, submenu text colour, colour on hover, background colour , background colour on hover, font type etc. I want to avoid having to change the settings for each navigation block as there are a few. Also, I appreciate that the customizer options did not work as intended as they are meant for the primary menu. Is there a css to handle the customisation of the navigation block?

Many thanks.

[David]

Hi there,

try this CSS:

/* Styles for all items */
.wp-block-navigation .wp-block-navigation-item__content {
    font-size: 15px;
    color: #f00;
    background-color: #0f0;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
    color: #0f0;
    background-color: #ff0;
}

/* styles specifically for sub menu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 12px;
    color: #00f;
    background-color: #f00;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: #00f;
    background-color: #0f0;
}

[ammgbr]

Many thanks David that works well!

May I clarify also whether it is possible to have rounded corners around the menu? Lastly, what is the best way to change font type?

Apologies for the multiple Qs, happy to create a new ticket if needed

EDITED

Have found how to change fonts and adjust height:) I have done so via Customizer>Typography by amending the ‘buton’ section, if gives off the typography settings to the navigation menu block

I only need to find out how to make the submenu corners a bit rounded

[Fernando]

Hello there,

Here’s a CSS you may try adding in Appearance > Customize > Additional CSS:

ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item:first-of-type > a {
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-bottom: none !important;
}

ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item:last-of-type > a {
    border-radius: 0 0 10px 10px;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-top: none !important;
}

ul.wp-block-navigation__submenu-container > li.wp-block-navigation-item:not(:first-of-type):not(:last-of-type) > a {
    border: 1px solid rgba(0,0,0,.15) !important;
    border-top: none !important;
    border-bottom: none !important;
}

ul.wp-block-navigation__submenu-container {
    border: none !important;
}

Hope this helps!

[ammgbr]

Many thanks that works!

[Fernando]

You’re welcome!

[Stefanie]

Hi there,

I just found this post because I have a very similar question.
I am looking for a way to highlight the active/current link in the navigation block with color. Is there a way to do this?

Thank you!

[David]

Hi there,

can i see the site you want to apply this too?
If need be, raise a new topic where you can access the Private information field for sharing the URL

[Author]

Posts