Okay
  Public Ticket #1413890
Menu Font Color
Closed

Comments

  •  1
    Tracy started the conversation

    How do I change the color of a word on the main-header-menu so that when you are on that page it is highlighted. 

    Ex. someone is on the ABOUT US page and "ABOUT US" is now blue vs. black in the header

  •  68
    Alek replied

    Try this CSS (untested):

    #header:not(.is-transparent) .primary-menu > li.current-menu-item > a,
    #header:not(.is-transparent) .primary-menu > li.current-menu-ancestor > a {
       color: red !important;
    }

    You can add it to the customizer Appearance > Customizer > Additional CSS

  •  1
    Tracy replied

    thanks - I followed the instructions. was that suppose to do something? 

  •  68
    Alek replied

    Yes, that should have worked if you have selected a custom menu to use for the main menu. Try this CSS instead, I have tested it to confirm that it should work:

    #header .primary-menu > li.current_page_item > a,
    #header .primary-menu > li.current_page_ancestor > a {
       color: red !important;
    }
  •  1
    Tracy replied

    ok - thanks for this additional information. It is still not working for me.

    I have put it here (attached): Appearance > Customize > Additional CSS 

    Admittedly, I am not sure what is meant by a custom menu (see other attached). Is there an option in wordpress I am not seeing? 

    Attached files:  Screen Shot 2018-01-08 at 9.41.15 AM.png
      Screen Shot 2018-01-08 at 9.49.42 AM.png

  •  68
    Alek replied

    Everything looks good to me, thank you so much for those screenshots. Can you please send me he URL to your site? That way I can get a better idea of what is going on.

  •  1
    Tracy replied

    Sure that would be much appreciated. We need this - we were looking at hotjar recordings of people using our site and they kept clicking on the menu to go to pages they were already on. 

    https://broadstreet.io

  •  68
    Alek replied

    Thank you for that. This should definitely work now. It's because you had header transparency enabled on all (or at least most) of your pages, the CSS for which was outweighing the styles I provided. Awesome looking site btw! Very cool logo.

    body #header.top-header .primary-menu > li.current_page_item > a,
    body #header.top-header .primary-menu > li.current_page_ancestor > a {
       color: red !important;
    }
  •  1
    Tracy replied

    ok thanks - i think i got it working - much appreciated! 

  •  68
    Alek replied

    Let me know if you need anything else.