Active Page in Primary Navigation

lauradonia

Hi,

Is there a way to make the active page styles persist when you navigate to folders or galleries on that page?

my site is http://www.lauradoniaphotography.com

For example, if I click on Events, and then a gallery in Events, the active page styles in the menu disappears. I'd like for it to persist for as long as I am in in the Events hierarchy. Is there a way to do this?

thanks!

Laura

Hikin' Mike

In order for that to work you need to create a sub-menu for your 'Events' folder. When your adding links, make sure you turn ON 'Include Sub-Links'. If you don't want to display the sub-menu you just created, you can add this to your theme's CSS:

/**
* Hides Sub-menus but Displays Active Link
************************************************/   
.sm-user-ui .sm-page-widget .sm-page-widget-nav-toplink .yui3-menu-children {
    display: none;
    }   

I do something similar to my 'Article' pages.

lauradonia

Hi Mike, thanks you so much. I'm not sure this will work for me because as soon as I click into a gallery on the Events page (or other sub pages), then the style on the active menu will disappear right?

thanks! Laura

Hikin' Mike

It shouldn't unless I'm not understanding your question.

lauradonia

So, for example - in the Client Galleries section, when i click 'Client Galleries' the active menu style is selected, but then if i click on a Gallery in that page, the style on 'Client Galleries' will go away. Am I doing something wrong?

thanks!

Smug Eric

Well that's because when you go into the gallery the client galleries is no longer the active link, you are now in a child of that folder though. The parent links code from here should work for you:

http://www.aaronmphotography.com/Customizations/Navbar/Emphasize-Active-Page

lauradonia

Unfortunately, the parent links code doesn't work (i had already tried that and it's currently in my theme CSS, but doesn't seem to help!)

Hikin' Mike

@lauradonia said:
So, for example - in the Client Galleries section, when i click 'Client Galleries' the active menu style is selected, but then if i click on a Gallery in that page, the style on 'Client Galleries' will go away. Am I doing something wrong?

thanks!

Like I mentioned earlier, in order for this to work you MUST turn on 'Include Sub-Links':

I did forget to add some code to show the color text. I had it on my theme's CSS, but forgot it was "my" code.

.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.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-toplink.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-activepage > a.yui3-menu-label::after,
.sm-user-ui .sm-page-widget-nav .yui3-menu-has-children.sm-page-widget-nav-hasactivepage > a,
.sm-user-ui .sm-page-widget-nav .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-mobile .sm-page-widget-nav-items .sm-nav-item-toplevel.sm-accordion-item-open > .sm-accordion-item-label {
    border-bottom: 2px solid #43b02a;
    color: #43b02a;
    }   

Then if you want to hide the sub-menus, use this:

/**
* Hides Sub-menus but Displays Active Link
************************************************/   
.sm-user-ui .sm-page-widget .sm-page-widget-nav-toplink .yui3-menu-children {
    display: none;
    }       

photoclick

It's not absolutely necessary to select "Include Sub-Links". With a lot of subfolders the entire menu might looks ugly long. Try this one:

.sm-page-parentnode-SkRbkx .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-node-rfXQ8d .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-parentnode-dWqzVh .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(4) a { color: #43B02A !important; font-weight: 600!important; padding-bottom: 2px; border-bottom: 2px solid #43B02A; }

If you change the sequence of your menu items the above should be rewritten to reflect the change.

Hikin' Mike

@photoclick said:
It's not absolutely necessary to select "Include Sub-Links". With a lot of subfolders the entire menu might looks ugly long. Try this one:

.sm-page-parentnode-SkRbkx .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-node-rfXQ8d .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-parentnode-dWqzVh .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(4) a { color: #43B02A !important; font-weight: 600!important; padding-bottom: 2px; border-bottom: 2px solid #43B02A; }

If you change the sequence of your menu items the above should be rewritten to reflect the change.

It does get ugly if you have a lot of sub-links. That's why I added the hiding part. But this works and it's a great solution.

photoclick

oh... I missed the part when you hide all the subs. My bad. I guess both approaches deliver the same result at the end

lauradonia

@photoclick said:
It's not absolutely necessary to select "Include Sub-Links". With a lot of subfolders the entire menu might looks ugly long. Try this one:

.sm-page-parentnode-SkRbkx .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-node-rfXQ8d .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(3) a, .sm-page-parentnode-dWqzVh .sm-page-widget-13009852 .sm-page-widget-nav-toplink:nth-child(4) a { color: #43B02A !important; font-weight: 600!important; padding-bottom: 2px; border-bottom: 2px solid #43B02A; }

If you change the sequence of your menu items the above should be rewritten to reflect the change.

This worked like a charm. Thank you so much. @Mike - thank you for your help also. What i like better about this approach is I don't need to create submenus and update the sublinks every time I had a new gallery or folder as these sections could be pretty fluid.

Thanks you both so much!

Laura