Highlight Menu Link of Current Page

  • Unknown's avatar
    sebastianmesserer · Member ·

    Dear all,

    Which CSS Text do I need to achieve that the menu item of the page the visitor is currently on is highlighted? Let’s say I click on “Portfolio”, I would want the “Portfolio” in the menu to be yellow while the other menu items remain black. Here is the code of the site, found right-clicking on the current menu item and clicking “Encode” in Chrome:
    `
    <div class=”menu-main-menu-container”><ul id=”menu-main-menu” class=”menu”><li id=”menu-item-31″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-31″>JOURNAL
    <li id=”menu-item-788″ class=”menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-6 current_page_item menu-item-788″>PORTFOLIO
    <li id=”menu-item-789″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-789″>ABOUT ME
    <li id=”menu-item-34″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-34″>CONTACT
    <li id=”menu-item-875″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-875″>JOUR NAL

    The site is currently in private and I have taken out the direct link from my code.

    Which CSS can I use?

    Thank you very much.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi there, on Publish theme, use the following to set a current menu/page item color. 

    .main-navigation .current_page_item a, .main-navigation .current-menu-item a {
	color: #ffee00;
}

    I would suggest something other than yellow since it is hard to read, but you could perhaps darken it to more of a butterscotch yellow/brown or something like that.

  • Unknown's avatar
    sebastianmesserer · Member ·

    Thank you very much for your help. It worked for all items but the blog. I have a link there in the menu that I manually made to direct to my homeaddress, where the journal is. I tried linking it to mywebsite.com/blog but then I land on the page that says “This is where your blog is.” Could it have something to do with this? It has a different code than the others.menu-item menu-item-type-custom menu-item-object-custom menu-item-875

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, I took a look through your custom CSS, and when you add labels before sections, such as “Intro page” you need to wrap those like this
    `/*Intro page*/
    if you don’t, the text will confuse the browsers when they are trying to render your page and can prevent your custom CSS from loading. I went ahead and fixed all those in your custom CSS so that I could see exactly where we are on things.

    The custom link did not have the current menu/current page CSS classes set on the custom link, so I added Journal to your custom menu by adding the “home” button to your site and then changing the “home” label to Journal, and now that menu item gets the underline when you are on that page.

  • Unknown's avatar
    sebastianmesserer · Member ·

    Fantastic, thank you for your thorough support!

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome.

  • The topic ‘Highlight Menu Link of Current Page’ is closed to new replies.