Change menu text colour?

@carefactornil you can change the color of the menu items by adding the following code to Appearance -> Customize -> Additional CSS:

.navbar {
    color: #4285f4;
}

Thanks, Ina – I tried this but 2 issues.
1. Inside WordPress the menu changes colour fine. Even though I’ve published it, the website (mindblown.io) still shows white though. Is there anything else I need to do to get the CSS updated?
2. The Inspiro theme menu has a line appear under the menu header when you hover over it – which still appears in white, even in WordPress. Is there a way to get that underline to appear the same colour too?

OK, so for #1 this is now changed to black. Not sure why it suddenly did that – is there any kind of delay for this kind of thing?
#2 is still an issue

• This reply was modified 2 years, 2 months ago by carefactornil.

Actually, this seems to have exposed another issue. The desktop version is fine in terms of black text on white background. But on mobile/tablet I have white text on white background, i.e. invisible.

I can also see it’s not actually white text on white background on mobile – it’s just the menu burger which I guess is an icon rather than text, so also need a way to adjust the colour of that (as well as the hover underlines).

@carefactornil Add this CSS code in the Customizer > Additional CSS to show the hamburger menu icon:

.navbar-toggle .icon-bar {
    background: #000;
}

.side-nav-open .navbar-toggle .icon-bar {
    background: #fff;
}

Thanks, @ciorici ! Worked great on the burger.
Now I just need to sort those hover lines under the menu items – more CSS?

@carefactornil Try this CSS code:

.navbar-nav>li>a:hover {
    border-bottom: 1px solid rgba(0,0,0,.8);
}

.navbar-nav>li.current-menu-item>a, .navbar-nav>li.current-menu-parent>a, .navbar-nav>li.current_page_item>a {
    border-bottom: 1px solid rgba(0,0,0,.3);
}

Thanks again!

Hi, I’ve used all of the above code and it has been very helpful for me, however I just need one more thing if possible.

I would like to change the colour of the svg arrow that appears next to menu items which have children. I’ve tried to guess the code myself with no luck, any help please?

Hi, @jazzcpj

Use the following code:

.navbar-nav .menu-item-has-children .svg-icon {
fill: #88e482;
}

That’s worked, thank you!!

I have the same issue but the custom css is not making any change: should this happen on the free version or do I need to purchase for the custom css to change?

@angie1965 All the CSS code from above is meant to work with the free version of Inspiro and doesn’t require purchasing the premium version of the theme in order for the code to work.