Background colour in the navigation menu

Hi there,

To clarify, did you mean "one of my navigation menu ITEM" instead of "one of my navigation menus"?

If you only want to apply specific styling to a specific menu item, we can take the menu item's unique class selector or ID.

Example CSS:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li#menu-item-7978 > a {
    background-color: white;
    border-radius: 50px;
    color: black;
}

#menu-item-7978 is the ID of the "Free Blog Setup" menu item.

Thanks. This is what I wanted but could you help me with the hover effect.

Thanks. This is what I wanted but could you help me with the hover effect.

Sure,

We simply modify the selector a bit to add :hover

Example:

.header-wrap #site-navigation:not(.toggled) .main-nav > ul > li#menu-item-7978:hover > a {
    background-color: black;
    color: white;
}

thank you so much Elvin.

It looks like it is showing only on my home page. Is there any way to show it on every page, post archives etc.

Can you try replacing the CSS selectors into this?

#site-navigation .main-nav > ul > li#menu-item-7978:hover > a {
    background-color: black;
    color: white;
}

#site-navigation .main-nav > ul > li#menu-item-7978 > a {
    background-color: white;
    border-radius: 50px;
    color: black;
}

It worked

This should work on other pages as well.

Although, the white background + border-radius won't be obvious on some pages because the header background is white as well. There won't be any contrast. :)