Nav Menu color issue

[Josh Brahm]

So in our header menu, we have an About option, and there’s a dropdown menu under it if you hover giving multiple options, like Mission, Staff, etc.

When on any page EXCEPT the main About page, the dropdown works like it should, with white links that turn orange when you hover over them. But when on the About page, and you go to the menu, those links don’t change color when hovering. Any idea why?

[Bill Robbins]

Hey Josh,

What’s the URL to the page where you’re having trouble? That way I can take a look for you.

Thanks,
Bill

[Josh Brahm]

Here you go. 🙂

About

[Bill Robbins]

Thanks. I believe it’s the color of links that have been visited that won’t change on hover. When I first viewed the page, they were all white and then orange when I hovered over them. As I clicked through them and then back to the About page, the ones I visited would stay white on hover, but the others would still be orange.

Let’s make an edit to make that a bit more specific. Let’s try this first:

1. Go to the Appearance section in your WordPress dashboard and choose Edit.
2. From the list of files on your right, choose custom-css.php
3. Scroll down to this section:

   
   nav#top-menu ul li:hover > ul a:hover,
   		nav#top-menu ul li ul li.current-menu-item a:hover,
   		nav#top-menu ul li ul li.current-menu-item a,
   		.scroll nav#top-menu ul li:hover > ul a:hover,
   		.scroll nav#top-menu ul ul li.current-menu-item a:hover,
   		.slicknav_nav .slicknav_item a:hover { color: <?php echo of_get_option('navigation_drop_down_color_hover' ); ?>; }
   

   and replace it with this:

   
   nav#top-menu ul li:hover > ul a:hover,
   nav#top-menu ul li ul li.current-menu-item a:hover,
   nav#top-menu ul li.current-menu-item ul li a:hover,
   nav#top-menu ul li ul li.current-menu-item a,
   .scroll nav#top-menu ul li:hover > ul a:hover,
   .scroll nav#top-menu ul ul li.current-menu-item a:hover,
   .slicknav_nav .slicknav_item a:hover { color: <?php echo of_get_option('navigation_drop_down_color_hover' ); ?>; }
   

   (Make sure not to copy that from the support email.)

4. Save your changes.

See if that won’t allow the color to work like we expect it to with previously visited pages.

If that doesn’t do the trick, change the block you just added to be like this:

nav#top-menu ul li:hover > ul a:hover,
nav#top-menu ul li ul li.current-menu-item a:hover,
nav#top-menu ul li.current-menu-item ul li a:hover,
nav#top-menu ul li ul li.current-menu-item a,
.scroll nav#top-menu ul li:hover > ul a:hover,
.scroll nav#top-menu ul ul li.current-menu-item a:hover,
.slicknav_nav .slicknav_item a:hover { color: <?php echo of_get_option('navigation_drop_down_color_hover' ); ?> !important; }

Let me know what you turn up,
Bill

[Josh Brahm]

You are the single most impressive customer service helper in the world. Thank you.

[Bill Robbins]

Thanks Josh, I appreciate it 🙂

[Author]

Posts