Bold top menu link when you're on one of it's sub menu pages?

smcust · October 12, 2014

I have the following code which bolds the page title in my navigation menu for the page you're actively on:

/* Make the menu nav bar text for the active page a different color */
.sm-page-widget-nav-activepage > a {
  color: #181818 !important;
  font-weight:bold;
  border-bottom-width:2px;
  border-bottom-style:solid;
  border-bottom-color:#505050;
}

Is it possible to bold the parent menu title when you're on one of it's children sub-menu's pages?

leftquark · October 13, 2014

smcust wrote: »

Is it possible to bold the parent menu title when you're on one of it's children sub-menu's pages? For example, on my site, if you're on "Pricing" under "Family Portraits", is it possible to bold both "Family Portraits" as well as bold "Pricing"?

Unfortunately we only add an identifier for the specific menu link that is active. The parent of a child (i.e. the top menu for a sub-menu) doesn't get an identifier that can then be controlled with CSS. If you would like to suggest this you can head on over to the SmugMug Feature Requests page and let us know!

smcust · October 13, 2014

leftquark wrote: »

Unfortunately we only add an identifier for the specific menu link that is active. The parent of a child (i.e. the top menu for a sub-menu) doesn't get an identifier that can then be controlled with CSS. If you would like to suggest this you can head on over to the SmugMug Feature Requests page and let us know!

Thanks Aaron for your fast reply! I didn't know you worked for SM! Too cool.. Googling SmugMug customizations always brings up your (awesome) site. I fear my feature request will be lost in all the votes, I'll have to live without it I guess

leftquark · October 13, 2014

smcust wrote: »

Thanks Aaron for your fast reply! I didn't know you worked for SM! Too cool.. Googling SmugMug customizations always brings up your (awesome) site. I fear my feature request will be lost in all the votes, I'll have to live without it I guess

You're welcome!

I'm in week #2 here so it's very new and I'm still learning the ropes. I'm planning on making a more official announcement on the forums very soon.

smcust · October 13, 2014

SM seems like an awesome company. With your knowledge, I'm sure you'll fit right in.

Your first project is to make the parent menu link bold

This makes so much sense to me, I'm surprised SM doesn't have this already. Though, since starting to use SM, it's the first time "I'm surprised", what a terrific product

pilotdave · October 14, 2014

leftquark wrote: »

You're welcome!

I'm in week #2 here so it's very new and I'm still learning the ropes. I'm planning on making a more official announcement on the forums very soon.

I was excited to see your new profile. Nice to see someone that knows the product well working for the company. Any chance you can give some insight on how things work on the inside? Specifically, why we see more features removed than added, why bugs take years to get fixed (if ever), and why every decision just seems crazy? Or maybe that's more of a question for a former employee instead of a new one...

Dave

leftquark · October 14, 2014

pilotdave wrote: »

I was excited to see your new profile. Nice to see someone that knows the product well working for the company. Any chance you can give some insight on how things work on the inside? Specifically, why we see more features removed than added, why bugs take years to get fixed (if ever), and why every decision just seems crazy? Or maybe that's more of a question for a former employee instead of a new one...

The beauty of having a guy with a customization background join the Product Team is that there's now a new voice for customization features!

smcust · October 15, 2014

Just checking in one last time before I close the books on this one. No way this is possible?

leftquark · October 16, 2014

smcust wrote: »

Just checking in one last time before I close the books on this one. No way this is possible?

Unfortunately at this time it's not possible.

ChancyRat · October 24, 2014

WHOAAAAA, You'll find me in the dictionary under "visual example of doing a double-take", as I tried to reconcile leftquark with smugmug.
YOU GO, NICHOLAS!

But... {sniff sniff} does this mean you can't help us with custom code any more?
{shivers}

leftquark · October 25, 2014

ChancyRat wrote: »

WHOAAAAA, You'll find me in the dictionary under "visual example of doing a double-take", as I tried to reconcile leftquark with smugmug.
YOU GO, NICHOLAS!

But... {sniff sniff} does this mean you can't help us with custom code any more?
{shivers}

Thanks! It actually means the opposite

I get to help you more than before! Now it's part of my job to come on here and help provide the amazing customer support that you value!

-Aaron

ChancyRat · October 25, 2014

leftquark wrote: »

Thanks! It actually means the opposite I get to help you more than before! Now it's part of my job to come on here and help provide the amazing customer support that you value!

-Aaron

You are sweet, Aaron, and even when I've gone and mixed you and Nicholas up.
:nono
My bad.

So sorry.
So glad you can continue to help us!

SmugSam · October 26, 2014

smcust/Aaron,

Couldn't you use the 'state' of the parent menu to achieve this?? Maybe it would only work on accordion menus (smcust I cannot see a link to your site, so not sure how you have your menu set up). On my site (link below) I have a parent menu (called 'More') with sub menu, and I have the colour of the menu change when the submenu is expanded, and change back when it is not. Could you do something similar to make yours bold?

EDIT: Although on further thought, I am guessing you are not using a collapsable menu, as if you were you prob wouldn't be trying to highlight which is the parent menu!

Sam

smcust · October 26, 2014

SmugSam wrote: »

smcust/Aaron,

Couldn't you use the 'state' of the parent menu to achieve this?? Maybe it would only work on accordion menus (smcust I cannot see a link to your site, so not sure how you have your menu set up). On my site (link below) I have a parent menu (called 'More') with sub menu, and I have the colour of the menu change when the submenu is expanded, and change back when it is not. Could you do something similar to make yours bold?

EDIT: Although on further thought, I am guessing you are not using a collapsable menu, as if you were you prob wouldn't be trying to highlight which is the parent menu!

Sam

There's hope!

Here is my site: http://tinyurl.com/m79vnex
Password: dgrinpass

Sam, your photographs are amazing! Stunning. My menu is set up using SmugMug's menu navigation. SmugMug knows somewhere which the parent page is, as this is how they're set up (drag and drop and indent using SmugMug's menu builder)

Do you think it could work?

SmugSam · October 27, 2014

smcust wrote: »

Do you think it could work?

Aaaahhhhh. I see what you are wanting to do now. I'm afraid the idea I had is not going to help you in this case.

But I am thinking if there is any other way to achieve it. Aaron's point about not being able to reference parent elements is your sticking point here. I will do some more thinking and come back to you.

(And thank you for the very kind of comments! Your site is looking great!)

SmugSam · October 27, 2014

OK. I did some thinking and I think I have a way to do this. But it isn’t particularly pretty. Also bear in mind - I am a CSS amateur, so there is a good chance that my code may need some tweaking, by you or someone else here, for it to be right! (I usually don’t get it right first time with my own site, and that is *with* the benefit of being able to play around with it. But I have tried this out on my own site and seems to work.)

My thought was this: although we cannot address a ‘parent’ element, we could simply say “When someone is viewing page A, B or C, then make one of the menu links look different.”

Try this first section as a test (to make sure the syntax is right). This just addresses the very first page under Weddings:

/* Highlight ‘Weddings’ when on ‘How to hire..’ page */
sm-page-node-pvjwZ .sm-page-widget-7335931 li:nth-child(3) {
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
}

After that, if you are on the “How to Hire a Wedding Photographer” page, the ‘Weddings’ menu item should be highlighted with your chosen formatting.

If that works, then replace the code above with this:

/* Highlight ‘Weddings” when on any child page */
sm-page-node-pvjwZ .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-x6DLs .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-4NXvH .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-ZwnXk .sm-page-widget-7335931 li:nth-child(3) {
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
}

This should address *all* the first child pages under Weddings (but not the subpages off “After your wedding”). I know you can select multiple elements with commas separating them, but I have never tried it with the ‘nth-child’ specification also.

If that works, then we can add to it for the sub-subpages, and do the same for the other drop down menus. Bear in mind that if in the future you change the menu, add pages later, etc you will have to reflect those changes in this code!

Let us know how you get on.

smcust · October 27, 2014

SmugSam wrote: »
OK. I did some thinking and I think I have a way to do this. But it isn’t particularly pretty. Also bear in mind - I am a CSS amateur, so there is a good chance that my code may need some tweaking, by you or someone else here, for it to be right! (I usually don’t get it right first time with my own site, and that is *with* the benefit of being able to play around with it. But I have tried this out on my own site and seems to work.)

My thought was this: although we cannot address a ‘parent’ element, we could simply say “When someone is viewing page A, B or C, then make one of the menu links look different.”

Try this first section as a test (to make sure the syntax is right). This just addresses the very first page under Weddings:
/* Highlight ‘Weddings’ when on ‘How to hire..’ page */
sm-page-node-pvjwZ .sm-page-widget-7335931 li:nth-child(3) {
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
}
After that, if you are on the “How to Hire a Wedding Photographer” page, the ‘Weddings’ menu item should be highlighted with your chosen formatting.

If that works, then replace the code above with this:
/* Highlight ‘Weddings” when on any child page */
sm-page-node-pvjwZ .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-x6DLs .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-4NXvH .sm-page-widget-7335931 li:nth-child(3), .sm-page-node-ZwnXk .sm-page-widget-7335931 li:nth-child(3) {
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
}
This should address *all* the first child pages under Weddings (but not the subpages off “After your wedding”). I know you can select multiple elements with commas separating them, but I have never tried it with the ‘nth-child’ specification also.

If that works, then we can add to it for the sub-subpages, and do the same for the other drop down menus. Bear in mind that if in the future you change the menu, add pages later, etc you will have to reflect those changes in this code!

Let us know how you get on.

Sam, I really appreciate you helping here! I tried the above, and it's definitely doing something, but it's "over applying", and applying the changes to all of the 3rd elements in all menus (main, and any menu item with sub menus, and submenus of the submenus)

Here is the farther I got along (still on my site). As you can see, it underlines/bolds the 3rd element of every single menu, and it bolds all of the submenus

/* Highlight ‘Weddings’ when on ‘How to hire..’ page */
.sm-page-node-pvjwZ .sm-page-widget-7335931 li:nth-child(3) {
  color: #181818 !important;
  font-weight: bold !important;
  border-bottom-width: 2px !important;
  border-bottom-style: solid !important;
  border-bottom-color: #505050 !important;
}

leftquark · October 28, 2014

That got me thinking, you could add a CSS block to every page (yes, it's a pain in the tuchas) that you want to highlight it's parent, with the following code:

/* Bold the "WEDDINGS" link and change its color */
.sm-page-widget-7335931 li.sm-page-widget-nav-toplink:nth-of-type[COLOR="Red"](3)[/COLOR]>a {
  font-weight: bold !important;
  color: #505050 !important;
}

So for every page under weddings you'd add this code. For every page under the other ones, you'd slightly change the code. It would basically say "highlight this part of the top menu based on what I tell you to highlight, because I (Phil) know what page you're on." There's no easy way to do this so that it's smart and lets the computer decide which one the user is on

This only touches the top menu item, not the sub-menus. You'd have to add this to every page under your "Weddings" tab (yes, I realize this would be tedious and there's no easy way to copy it to the other pages). If you wanted to change it to work for "Family Portraits" pages, you'd change the 3 (in red) to a 4, etc.

SmugSam · October 28, 2014

leftquark wrote: »

That got me thinking, you could add a CSS block to every page (yes, it's a pain in the tuchas) that you want to highlight it's parent

Ahhhh. So it would be better do add this code on every page, rather than have it centralised using the page identifier, Aaron? Would love to know the advantages?

Phil - as for the issue with the code I gave you, sorry yes I had forgotten that that command would affect EVERY 3rd child element on the menu (so the submenus and subsubmenus, etc also). Ooops! We could add a couple of lines to the code to tell it to 'reset' the sub/subsub children so they behave properly. But perhaps you want to give Aaron's suggestion a go first? I bow to his vastly superior knowledge in these things (and, ironically, he was the one who showed me about this whole 'nth-child' thing I thought might work for you!).

leftquark · October 28, 2014

SmugSam wrote: »

Ahhhh. So it would be better do add this code on every page, rather than have it centralised using the page identifier, Aaron? Would love to know the advantages?

So you just taught me something -- I didn't realize each page had its own identifier (the .sm-page-node-{BLAH})!!! That's an interesting thought. I guess it really depends on how you personally want to go about organizing things. Phil would still need to go into every page he has and grab the node identifier for each one, write that down, and include it in the code. It might be slightly quicker to do it this way since you won't have to go to each page (which takes a few clicks), drag in a CSS block, hit paste, click publish. However, I typically wouldn't look to a theme's CSS for customizing a specific page. My first place to look would be in a CSS block, which is the exact reason we have CSS blocks for a specific page. So really it's whatever Phil finds easier.

SmugSam wrote: »

Phil - as for the issue with the code I gave you, sorry yes I had forgotten that that command would affect EVERY 3rd child element on the menu (so the submenus and subsubmenus, etc also). Ooops! We could add a couple of lines to the code to tell it to 'reset' the sub/subsub children so they behave properly. But perhaps you want to give Aaron's suggestion a go first? I bow to his vastly superior knowledge in these things (and, ironically, he was the one who showed me about this whole 'nth-child' thing I thought might work for you!).

Just for the record, I used the "{object}>{adjacent}" identifier so that he wouldn't have to write any extra code to reset the sub-menu children (in the example above it's "nth-of-type(3)>a"). Syntax here is very important as "...(3) > a" is very different from "(3)>a" (note no spaces). This limited the code to be limited only to the very next <a> after the 3rd <li> and makes it so it doesn't apply to the sub-menus.

You teach me something, I teach you. A game of tag

SmugSam · October 28, 2014

leftquark wrote: »

So you just taught me something

Holy heck - I'm opening some champagne!

The page identifiers aren't too hard to find - and I already grabbed all the submenu page identifiers for Phil in my second batch of code above just to get things started.

I had no idea you could combine 'li.elementx' (nor exactly what this is doing), nor do I understand the syntax difference of 'identifier>a' vs 'identifier > a' that you explained so yes some new things there for me, thanks!

So Aaron, theoretically your 'adjacent' identifier would also work with my earlier code to limit it to the top menu only? I.e: if Phil made the change in red (beware the line that scrolls off the edge of the box):

/* Highlight ‘Weddings” when on any child page */
sm-page-node-pvjwZ .sm-page-widget-7335931 [COLOR="Red"]li.sm-page-widget-nav-toplink:nth-of-type(3)>a[/COLOR], .sm-page-node-x6DLs .sm-page-widget-7335931 [COLOR="red"]li.sm-page-widget-nav-toplink:nth-of-type(3)>a[/COLOR], .sm-page-node-4NXvH .sm-page-widget-7335931 [COLOR="red"]li.sm-page-widget-nav-toplink:nth-of-type(3)>a[/COLOR], .sm-page-node-ZwnXk .sm-page-widget-7335931 [COLOR="red"]li.sm-page-widget-nav-toplink:nth-of-type(3)>a[/COLOR] {
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
}

My two cents worth on where to put the CSS - I put all my stuff in the Theme's CSS rather than blocks on different pages so that I know where to go to look for problems/make changes, rather than trying to remember which page I did what on.

Allen · October 28, 2014

If you use .sm-page-node-pvjwZ it can go in the "entire site" CSS because it is specific for that page.

I ONLY put stuff in a theme if it affects that specific theme. Change themes and you lose it all.

I use specific page class names to change my site wide banner for a specific "category". I added two
CSS blocks, one for remove and one for add. Both banner widgets added "entire site".

example of contents: "entire site" CSS - there are over 1200 lines like this is each block.

remove block
.sm-page-widget-5027770 {visibility: hidden; height:0} /* site wide */
...
.sm-page-node-DhQXH .sm-page-widget-5028039, /* 2014-05-30 */
.sm-page-node-bZH5n .sm-page-widget-5028039, /* 2014-05-26 */
.sm-page-node-JBSHj .sm-page-widget-5028039, /* 2014-05-24 */
.sm-page-node-7zTGC .sm-page-widget-5028039, /* 2014-05-22 */
...
{visibility: hidden; height:0}

add block
.sm-page-node-DhQXH .sm-page-widget-5027770, /* 2014-05-30 */
.sm-page-node-bZH5n .sm-page-widget-5027770, /* 2014-05-26 */
.sm-page-node-JBSHj .sm-page-widget-5027770, /* 2014-05-24 */
.sm-page-node-7zTGC .sm-page-widget-5027770, /* 2014-05-22 */
...
{visibility: visible; height:auto; margin-bottom: -10px;}

When I add a page I right click > Inspect Element
Copy page class name from <body> tag

leftquark · October 28, 2014

SmugSam wrote: »

I had no idea you could combine 'li.elementx' (nor exactly what this is doing), nor do I understand the syntax difference of 'identifier>a' vs 'identifier > a' that you explained so yes some new things there for me, thanks!

In CSS you can use the HTML tag and add in it's class name to be very specific. In the case above, I'm saying that "All <LI> list elements that have a class name of ".sm-page-widget-nav-toplink" should be included. Normally I don't include the HTML element in my CSS since I can just get away with the class name (simply just ".sm-page-widget....", however, in this case, I needed to say that I want all "<A>" elements adjacent to an "<LI>" element (thus the li.sm-page-node...>a). Does this make any sense?

I'm not really sure why "li > a" is different from "li>a" but one worked and one didn't <img src="https://us.v-cdn.net/6029383/emoji/ne_nau.gif" border="0" alt="" >

SmugSam · October 29, 2014

That DOES make sense. Thanks! Hmmm I don't think I have been targeting elements in my code very effectively, now I am armed with some of these pointers. Oh well - can always improve from here on in! Although no plans to take things to the level of Allen, by the sounds of where he has gotten too. That sounds like a lot of code, Allen!

As for the with/without space on the '>a' I hadn't seen reference to there being anything different, just that this was a 'child combinator selector' that only applies for the next level down for the parent (not sub-levels). But

here also.

I am concerned we may have lost the original poster, Phil, along the way. Phil - feel free to let us know how you get on, or if we've made things more confusing with our CSS Amateaur Hour Classes we should be able to clarify for you!

smcust · November 2, 2014

What a busy week. Sorry I haven't updated anyone. I just now got the chance to sit down and implement the changes you all have referenced. IT WORKS!! And it works perfectly. I can't thank you guys enough. Sam, through the others chiming in, it was your code that ultimately made it work, so thank you!!! And thank you to Aaron and Allen for your help to get this thing working, too! I hope others can benefit from this too. Here is the final code that's making this work:

/* Make the menu nav bar text for the submenu's parent page a different color */
.sm-page-node-pvjwZ .sm-page-widget-7335931 li.sm-page-widget-nav-toplink:nth-of-type(3)>a,
....above repeated for each page of each parent, changing (3) to the order the parent is in in the nav bar....
{
color: #181818 !important;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #505050;
font-weight:bold;
}

SmugSam · November 3, 2014

Fantastic Phil! And I see that you extended it to the other areas of the menu already - nice work.

Happy to have been of help.

Bold top menu link when you're on one of it's sub menu pages?

Comments