How to make the links in my header menu change color

  • Unknown's avatar
    audenpaulg · Member ·

    I don’t think you really need to look at my blog to understand my question, but if you do click on the attached link, be aware it’s a mature, BDSM and kink-related website so make sure children aren’t present and that you’re mentally prepared for content you might not really want to see LOL.

    My question is, i am using the Vivre theme on WordPress.com. It’s a great blocks-only theme. I love it. Except I can’t figure out, how do I make the menu in the header change colors depending on what page the user is on…. This is a site with simple organization there are like 6 links to 6 top level pages that are basic: contact, blog, home, about, etc. While it should be relatively clear to the user what page he’s on, i’d still like there to be something visual on the page showing him that. The original Vivre template used huge letters at the top with “Blog” or whatever. Depending on your screen it’s most if not all of the screen just for that word. Didn’t work for me so i removed it from the templates. Now I want a way for the user to visually know what page he’s on so i’d like the current page to have a red link versus black one in the main navigation menu. Makes sense right? How do i implement that? Please don’t tell me I need to make 6 different header templates because i can’t process how that would work organizationally right now. I think that’s probably the answer but was hoping there’s an HTML command i dont know or an option somewhere i have not found

  • Unknown's avatar
    thomasjvu · Member ·

    Hi there,

    I can’t view your website and I’m not sure if you have the WordPress Premium plan or higher, but if you do, you should be able to add Custom CSS to achieve this functionality.

    If you are using the block editor, something like this should work…

    /*change current nav item to red*/
li.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
    color: #ff0000;
}

    Here’s a guide on how to add CSS: https://wordpress.com/support/editing-css/

    I hope this helps!

  • Unknown's avatar
    audenpaulg · Member ·

    Ugh, i don’t have premium, i’m so cheap!
    i may have to pay for hosting and take it all out of wordpress’s hands, i’m finding they block so many features i need unless i keep going up tiers: from CSS to Google Analytics to Plug-ins to things as simple as an age gate not to mention if i want an online store. so frustrated with them right now.

    why couldnt you view my site tho?

  • Unknown's avatar
    thomasjvu · Member ·

    Oh I just couldn’t view it because it doesn’t seem like you provided a link. I’m just another forum member and not a staff member, so I can’t see what your website is if you don’t provide the link explicitly.

  • The topic ‘How to make the links in my header menu change color’ is closed to new replies.