[Resolved] Custom link in menu…color question

[Trina]

Hi Tom. I am setting up a personal blog and am very impressed with GP so far (and considering purchasing the plugin package). I do have a question though that I hope you can help me with.

I have added a custom link to my menu to display the home icon (linked to my url) in the menu along-side my static pages. The icon does show up. However, the “background” of that icon is a different color from the rest of the menu bar. Is this because it has been visited or something? Is there an easy way to make it always stay the same color as the menu bar the way the “links” to the static pages remain? I am linking to 2 screenshots I did to illustrate.

Thanks.

Pic showing the custom link

2nd pic showing that the “background” color is the same as what happens when you hover on “About Me.”

P.S. I am not an html/css expert. I googled to find out how to do that custom link. ;> So if there is a better way to accomplish that, I would be glad to know!

[Tom]

Hi there,

That might be the current menu item color – can you link me to your site possibly?

[Trina]

OK, I feel stupid now. Never checked it from another page. (I did check it on another page and you are right.) Is there a way to override the color for that icon only so that it never takes on the “current” color?

My site is here. No content…just getting started. ;>

[Tom]

Give this CSS a try:

.main-navigation .main-nav ul .current-menu-item:first-child > a {
    background-color: transparent;
    color: #FFF;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Trina]

Thank you very much! That appears to be doing the job great!

Presumably when I change color schemes (after I buy the Add-Ons) I can just update the color code, yes?

I assume since you didn’t say otherwise that the custom link method is the best way to put the home icon in place?

Thanks again!

[Tom]

Yes and yes! 🙂

Let me know if you need anything else!

[Author]

Posts