Originally Posted by Coma Pedrosa John, this is an amazing script and super documentation. Exactly what i'd love to put on my site. Now my problem is that i can't get it to work. I've read and re-read your instructions and the entire thread here. but somehow i can't see why it doesn't work for me. I tried to trouble-shoot, but it doesn't say a peep. Could you take a look? comapedrosa.smugmug.com I created the Nav bar in EZ setup and the domain name is changed. THANK YOU!

Your CSS isn't written for the Easy Customizer Navbar. Change this part of your CSS from this:

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {background: none; border-bottom: 1px solid #CCCC00; border-top: 1px solid #CCCC00;}

to this:

/* highlight individual menu items when their page is current */
#customNavContainer .navCurrentPage {
    border-bottom: 1px solid #DDDD00;
    border-top: 1px solid #DDDD00;
}

Works exactly as advertised!! Thank you so much!

Originally Posted by jfriend Remove this: #navcontainer .navCurrentPageParent {font-weight: bold !important; border: 2px solid #fff;} Add the part in red: #navcontainer ul li a:hover, #navcontainer .navCurrentPage { color: #000; background-color: #fff; }

I'm quoting this particular section because my navbar looked basically like the person's in this post, who wanted a tab to just stay highlighted when a person was on that page, rather than the text. it was dgafphoto, & his site is HERE . I basically had buttons just like his, but mine were green with white lettering and turned a lighter green when hovering. So, it didn't look that hard, but clearly I screwed up something royally that most of these people carried off just fine. Aargh. You can't even see my navbar now. I wasn't sure of the placement of the line that starts out "YE..." I tried it in a few different places in my CSS, not being clear whether it was supposed to be the very first line, or just the first line of this particular section of navbar code. Anyway, I'm sure I must have done something else wrong besides this, but can't find the problem. Here's the CSS that deals w/ my navbar as it stands now. Of course, this is the one time stupid me did not copy my code before making changes. Other than the CSS, I only copied the provided javascript to the bottom java box-- afaik. Very sorry to bug you with this, John! I thought I could do it. I really like the "Professional #3" Navbar that's at this link: http://www.cssplay.co.uk/menus/pro_horizontal.html but haven't downloaded the file, & maybe now's not the time to try it. Probably should have done that first. I don't know whether that one works with dropdowns, either, & I'll plan to add a few. Ok, my present CSS:

YE.onContentReady("navcontainer", function ()

#navcontainer ul {
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li {
display: inline;
}

#navcontainer ul li a {
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #336633;
font-size: 9pt !important;
line-height: 26px;
}

/* highlight individual menu items when their page is current */
#navcontainer ul li a:hover, #navcontainer .navCurrentPage {
color: #fff;
background-color: #33CC66;
}

Oh brother. In ref. to my post below...I just figured out what I'd done to make the site look like Picasso with ugly Morning Face, or some other kind of Gary Larson cartoon. I'd wrongly added the whole "YE..." line to CSS, not understanding that it was already in the Java box & that I was supposed to just edit it there! So-- now my site's back, but for some reason, no highlighting is happening. The parrot at my work always squawks accusingly when I come in-- "WHA'd you do??!" so that's what I'm asking myself now. Do you see the error? I still like this: http://www.cssplay.co.uk/menus/pro_horizontal.html (#3, the green one) Do you think it's hard to do?

Originally Posted by WinsomeWorks Oh brother. In ref. to my post below...I just figured out what I'd done to make the site look like Picasso with ugly Morning Face, or some other kind of Gary Larson cartoon. I'd wrongly added the whole "YE..." line to CSS, not understanding that it was already in the Java box & that I was supposed to just edit it there! So-- now my site's back, but for some reason, no highlighting is happening. The parrot at my work always squawks accusingly when I come in-- "WHA'd you do??!" so that's what I'm asking myself now. Do you see the error? I still like this: http://www.cssplay.co.uk/menus/pro_horizontal.html (#3, the green one) Do you think it's hard to do?

Since I'm regularly on the response end of your posts, I'm going to ask you for a favor. Please try very hard to make your question very clear and in the first line or two of your post. Then, you can write as much about it as you want. You sometimes write long posts and I read the whole thing and I don't know what question you are asking. I feel like I have to guess what you're asking about or whether you're asking a question at all.

OK, on this one it looks like from your second post (the first one had me confused) that you want to know why your navbar highlighting isn't working.

First, you need to clean up a javascript error. This code is causing an error on your homepage. You need to remove it until you can find a version that doesn't cause an error.

// Facebook button
  var pos = window.document.URL.indexOf("gallery");
     if ( SM) {
        var thisURL = webServer + "/gallery/" + AlbumID + "_" + AlbumKey + "/1/" + ImageID + "_" + ImageKey ;
   
    SM.buttons.FacebookButton = new YAHOO.widget.Button({
        id: 'Share on Facebook',
        label: 'Share on Facebook',
        container: 'altViews',
        type: 'link',
        href: 'http://www.facebook.com/share.php?u='+thisURL+'&t=SmugMug+Image',
        target: '_blank',
        className: 'sm-button sm-button-small facebookButton glyphButton menuButton share_button'
    });
     }

Then, this line of code in your bottom javascript is case sensitive. "NavContainer" must be "navcontainer" exactly how you have it in your own HTML:

YE.onContentReady("navcontainer", function ()

After you fix those, we can see what else needs fixing.

I'm very sorry about that, John-- I should have edited the first post instead, or made it more clear in the 2nd one that the first was now sorta obsolete. Yes, I get too bogged down in the details-- it's a constant battle for me. Good news is: with the exact changes you suggested, the tabs are highlighting perfectly on my navbar-- everything with that works fantastic! I think this is a big help to viewers-- and to me, too. Thank you for working on it!! Maybe at some point you can add this particular hover-highlighting to the original post as one of the options to choose-- it's a good one!

Since many folks have a simple navbar like mine, a note to them: The code I used, a couple posts down, will keep your whole tab (such as "home" or "guestbook") highlighted when you're on that page or section... instead of just the text. It essentially keeps that tab in hover mode while you're there. I mistakenly used caps because I saw them other places in the javascript-- don't do that! Copy John's script exactly!

John, right after I installed that Facebook button, I found out Smug had installed one in the "share" menu anyway, so it's a little redundant now & I hadn't gotten it removed. It's all removed now. I may have found the error in it though, at least in the part of it that was in my CSS box. There was a missing space before a link. I'll let the OP know. From what you were saying though, perhaps there are also errors in the Javascript part? I'd found this addition in a fairly recent thread here, but I guess it's a cautionary tale.

Is there a way to force the highlighting on one nav-bar-link when the user is in one category and its children that is not the one the nav-bar-link directly points to?

More specifically:
on my site http://comapedrosa.smugmug.com
the "personal" link in the nav-bar points to this gallery called "Personal": URL edited out
But that gallery has a link to the category also called "Personal": URL edited out

Is it possible to include some code so that the link "Personal" in the nav-bar is highlighted when the user is in the category "Personal" and its galleries, although it doesn't directly point there?

Thank you!

Originally Posted by Coma Pedrosa Is there a way to force the highlighting on one nav-bar-link when the user is in one category and its children that is not the one the nav-bar-link directly points to? More specifically: on my site http://comapedrosa.smugmug.com the "personal" link in the nav-bar points to this gallery called "Personal": http://comapedrosa.smugmug.com/Visit...10136862_QZx9f But that gallery has a link to the category also called "Personal": http://comapedrosa.smugmug.com/personal Is it possible to include some code so that the link "Personal" in the nav-bar is highlighted when the user is in the category "Personal" and its galleries, although it doesn't directly point there? Thank you!

Is your navbar from Easy Customizer? Or a pure custom one where you control all the HTML?

It's from the Easy Customizer.

Originally Posted by Coma Pedrosa It's from the Easy Customizer.

If it wasn't easy customizer, you could just add a class to that navbar item and a CSS rule to manually highlight it when in that category. You don't get that freedom with the easy customizer so the only way I know of to add that class would be yet another custom script that dynamically operates on the navbar objects.

As always, thank you John for your prompt and detailed answer.

Does that mean i'm out of luck?

Originally Posted by Coma Pedrosa As always, thank you John for your prompt and detailed answer. Does that mean i'm out of luck?

I'll think about whether there's any other possibility.

Great, thank you!

Originally Posted by Coma Pedrosa As always, thank you John for your prompt and detailed answer. Does that mean i'm out of luck?

To make the navbar work for your personal category, copy this script to your bottom javascript:

YE.onContentReady("customNavContainer", function()
{
    var re = /\/Personal\//;
    var links = Sizzle("li a", this);
    for (var i = 0; i < links.length; i++)
    {
        if (re.test(links[i].href))
        {
            YD.addClass(links[i], "personalNavLink");
            YD.addClass(links[i].parentNode, "personalNavLinkParent");
            break;
        }
    }
});

And then modify this line of your CSS to be this:

/* highlight individual menu items when their page is current */
#customNavContainer .navCurrentPage, .category_Personal .personalNavLink {border-bottom: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;}

John,

This works like a sharm.

I'm in heaven! And i don't know how to thank you!

I promise no more requests for this week!!!!

Hi,

The general highlighting works perfectly in Chrome, but in IE8 it has a rather random behavior. I've added "!important" in the CSS, but that hasn't helped at all. First the links where not highlighted at all. On the second pass, only the bottom line appeared in *some* links. Now it seems to only highlight the links when the user is in a gallery as opposed to a category. This is puzzling...

Is there anything you suggest i do to get a more robust and consistent behavior in IE8?

Thank you!!
Coma

Originally Posted by Coma Pedrosa Hi, The general highlighting works perfectly in Chrome, but in IE8 it has a rather random behavior. I've added "!important" in the CSS, but that hasn't helped at all. First the links where not highlighted at all. On the second pass, only the bottom line appeared in *some* links. Now it seems to only highlight the links when the user is in a gallery as opposed to a category. This is puzzling... Is there anything you suggest i do to get a more robust and consistent behavior in IE8? Thank you!! Coma

You don't need the !important stuff in this.

I don't know why it's having troubles in IE. It has to do only with the CSS and your particular navbar and IE not thinking there's room for the border and somehow clipping it off, nothing to do with the script itself.

You can try changing to this:

/* highlight individual menu items when their page is current */
#customNavContainer .navCurrentPageParent, .category_Personal .personalNavLink {border-bottom: 1px solid #FFFFFF !important; border-top: 1px solid #FFFFFF !important;}

This change puts the border on the <li> tag instead of the <a> tag.

Thank you so much for the explanation and solution John. Unfortunately, this didn't change anything to the behavior in IE8. How do others get it to work in IE8???

Thx!!

Originally Posted by Coma Pedrosa Thank you so much for the explanation and solution John. Unfortunately, this didn't change anything to the behavior in IE8. How do others get it to work in IE8??? Thx!!

Try adding this CSS:

#customNav a {line-height: 2;}

M a n y o u a r e g o o d !