Navigation Hover Color and Active Page Location Color

Visual Voodoo

Hi guys.

Can anyone help me with the following?

1) On my website (http://www.thephotoguru.com), I would like to fix the navigation links at the top of the page so that the color orange (#E58627) shows when I hover over the navigation item in the header.

2) In addition, I would like the active page that you are actually on to show that same orange at least 3 levels deep.

Hikin' Mike

You will need to add the three (People, Places, Things) galleries/folders to your menu, UNDER your Portfolio. Then go to 'Menu > Links'. Click on the ">" 'edit this item's properties' then turn 'ON' Include Sub-Links.

Then add this to your CSS.

/** 
* Different Color for Active/Hover Sub-menus
***************************************************/
.sm-user-ui .sm-page-widget-nav-toplink a:hover,    
.sm-user-ui .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a {
    color: #E58627;
    }   

/** 
* Turns off Sub-menu but allows Active links
***************************************************/
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(1) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(2) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(3) .yui3-menu-children {
    display: none;
    }   

Visual Voodoo

Thanks Mike. Much better.

After I did what you suggested, nothing was happening, so I went into my code looking for a conflict and found and removed the code below:

Now on the first level, of the navigation, the hover color changes. But if you go one level down or two levels down in the navigation and the active link color (#E58627) goes away.

For example, If you goto Stock Photos, then select the folder 2017, now the navigation has gone away. Same thing if you goto Portfolio, then select People. The link People should be orange and the main menu item Portfolio.

Same thing with the breadcrumbs...it should show you your location with an orange link.

/* Navigation Active Color */
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-vertical .yui3-menu-item .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    color: #E58627;} 

/* Navigation Sub Menu Background Color */
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-toplinks-regular .sm-page-widget-nav-toplink,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-regular .sm-page-widget-nav-toplink .yui3-menu-label,
.sm-page-widget-nav .sm-page-widget-nav-accordion.sm-page-widget-nav-toplinks-regular .sm-accordion > .sm-accordion-item > .sm-accordion-item-label,
.sm-page-widget-nav .sm-page-widget-nav-accordion.sm-page-widget-nav-sublinks-regular .sm-accordion .sm-accordion-children .sm-accordion-item-label,
.sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-toplinks-regular .sm-page-widget-nav-topitem,
.sm-page-widget-nav .sm-page-widget-nav-footer.sm-page-widget-nav-sublinks-regular .sm-page-widget-nav-subitem,
.sm-page-widget-nav .sm-page-widget-nav-mobile.sm-page-widget-nav-toplinks-regular .sm-page-widget-nav-items {
    text-transform: none;
    text-decoration: none;
    background-color: #ffffff;
    border-left: 2px solid #93BFE1;
    width: 220px}

/* Breadcrumb Hover Link Color */
.sm-user-ui .sm-page-widget-breadcrumb .sm-breadcrumb > a:hover {
    color: #666666 !important;
    text-decoration: underline;}

/* Breadcrumb Active Link Color */
.sm-user-ui .sm-page-widget-breadcrumb .sm-breadcrumb > a:active,
.sm-user-ui .sm-page-widget-breadcrumb .sm-breadcrumb > a:visited {
    color: #E58627;
    text-decoration: underline;}

Hikin' Mike

Sorry, I was kind of flying blind. Remove this:

/* Different Color for Active/Hover Sub-menus */
.sm-user-ui .sm-page-widget-nav-toplink a:hover,    
.sm-user-ui .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a {
    color: #E58627;}    

/* Turns off Sub-menu but allows Active links */
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(1) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(2) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children:nth-child(3) .yui3-menu-children {
    display: none;} 

Use this instead:

/* Different Color for Active/Hover Sub-menus */
.sm-user-ui .sm-breadcrumb-item[data-is-current-page="true"],
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink a:hover,    
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a {
    color: #E58627;}    

/* Turns off Sub-menu but allows Active links */
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children {
    display: none;}  

Visual Voodoo

Thanks Mike.

1) It works on Portfolio 3 levels down with the orange color on main navigation, but not the same way on the Stock navigation.

2) How do I get the breadcrumb links to hover to that orange color?

I appreciate you taking the time to help Mike.

Hikin' Mike

@Visual Voodoo said:
Thanks Mike.

1) It works on Portfolio 3 levels down with the orange color on main navigation, but not the same way on the Stock navigation.

2) How do I get the breadcrumb links to hover to that orange color?

I appreciate you taking the time to help Mike.

The same way you did with the Portfolio folder. You need to create a nav menu that lists all of your Stock Galleries in your 'Stock Photos'. Then replace this:

/* Turns off Sub-menu but allows Active links */
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children {
    display: none;} 

and use this:

/* Turns off Sub-menu but allows Active links */
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(3) .yui3-menu-children {
    display: none;}     

I didn't know you also wanted to have your breadcrumbs orange when hovered.

Replace this:

/* Different Color for Active/Hover Sub-menus */
.sm-user-ui .sm-breadcrumb-item[data-is-current-page="true"],
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink a:hover,    
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a {
    color: #E58627;} 

Use this instead:

/* Different Color for Active/Hover Sub-menus */
.sm-user-ui .sm-breadcrumb-item a:hover,
.sm-user-ui .sm-breadcrumb-item[data-is-current-page="true"],
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink a:hover,    
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a {
    color: #E58627;} 

Visual Voodoo

That's exactly what I wanted to do Mike. I would have never have guessed I would have to have done it that way. I really appreciate that!

Visual Voodoo

Mike an issue came up on the iPhone and iPad in landscape mode when you try to select the menu option Portfolio or Stock Photos. Weird, huh? Click the link and nothing happens. So when the screen looks like it does below, nothing happens when you select either one of those menu options. Any clues how to fix that Mike?

Hikin' Mike

@Visual Voodoo said:
Mike an issue came up on the iPhone and iPad in landscape mode when you try to select the menu option Portfolio or Stock Photos. Weird, huh? Click the link and nothing happens. So when the screen looks like it does below, nothing happens when you select either one of those menu options. Any clues how to fix that Mike?

I don't own a mobile device so I have to use this: http://quirktools.com/screenfly/#u=http://www.thephotoguru.com/&w=414&h=736&a=37&s=1

I'm not seeing any issues, but I'm not 100% sure I understand your question. Both your Portfolio and Stock links work when I use the 'iPhone 6/7' and 'iPhone 6/7 Plus' in landscape mode.

Visual Voodoo

Ok...so to duplicate the issue in landscape mode, select the iPad Pro. It doesn't work for me as indicated above. The mobile menu works, but the menu when it appears on a mobile device as depicted in the image above (like when in landscape mode on an iPad Pro), you select one of those 2 nav options and nothing happens. Weird. I am thinking I may need to include code for those 2 main menu items. Just a guess but it's weird that every other menu item works except for the 2 that we modified with code and sub menus. What's your thoughts?

Hikin' Mike

First thing I would do is to remove the code, specifically this:

/* Turns off Sub-menu but allows Active links */
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(2) .yui3-menu-children,
.sm-user-ui .sm-page-widget-nav-toplink:nth-child(3) .yui3-menu-children {
    display: none;}  

And see if that works. If not start removing other portions.