Current Navigation Highlighting

[mwdewitt]

Okay, I currently have this code controlling the highlighted word of the current…

ul#mt-main-nav li a:hover, ul#mt-extra-nav li a:hover, body#home ul#mt-main-nav li.home a, body#literature ul#mt-main-nav li.literature a, body#feelgoodcandy ul#mt-main-nav li.feelgoodcandy a, body#gloom ul#mt-main-nav li.gloom a, body#contact ul#mt-main-nav li.contact a, body#store ul#mt-main-nav li.store a,body#donations ul#mt-main-nav li.donations a, body#default ul#mt-main-nav li.home a {

background: #000000;

color: #FFFFFF;

}

…which controls the HTML code here…

Home


Graphic Novels & Written Novellas



Feel Good Candy


Gloom






Contact


Shop


Donations

How do I make it so when you select an item in a menu on this website, it also highlights the title of the menu, which is “GRAPHIC NOVELS AND WRITTEN NOVELLAS.” Thank you for any assistance that you can give me.

P.S. I would like to keep it strictly HTML, PHP, and CSS if I can. Thank you.

[timmey]

you should just add a class .selected for example for the selected parent.

and you should add a class to your active li too.

dont know what you are using for your side, but imo it would be the best way to style it.

something like

.active, .slected {color: white;}





Home


Graphic Novels & Written Novellas



Feel Good Candy


Gloom






...

[mwdewitt]

Okay, I placed that code in there, but the two menu items are both highlighted when you select one of them. On the bright side, “GRAPHIC NOVELS AND WRITTEN NOVELLAS” is now highlighted when you select a sub-menu. Visit here to see what I mean. So, now all we need to figure out is how to make it so only the selected sub-menu is highlighted along with “GRAPHIC NOVELS AND WRITTEN NOVELLAS.” Thank you for your help thus far!

Edit: And I just realized that when you select “GLOOM” it does not highlight the menu title. Hmm. Pondering. Help!

[mwdewitt]

Bump. I hate bumping, but I have no clue how to fix this and this entry has been off of the first page for quite some time. View the post above this to see my progress and error report. Thank you to anyone who can help me! Apologies for the bump.

[mwdewitt]

Bump, once again. You guys do not know how much I hate bumping my material, but this is literally the last thing I need to do on this website to make it complete (apart from redesigning one of the pages). I am sure it is a simple fix, but I do not know how to do it. Please, someone help me. Thank you so much!

[bryanfarris]

It looks like you need to go one step further in targeting the links you’d like to remain red or “selected:”

What you currently have:

body#feelgoodcandy ul#mt-main-nav li.literature a li, body#gloom ul#mt-main-nav li.literature a li {

background: #000000;

color: #C80032;

}

This is targeting the li’s when the body class changes. However, it’s not targeting the specific link. Try separating them:

body#feelgoodcandy ul#mt-main-nav li.literature a li.feelgoodcandy a {

background: none repeat scroll 0% 0% #000000;

color: #C80032;

}



body#gloom ul#mt-main-nav li.literature a li.gloom a {

background: none repeat scroll 0% 0% #000000;

color: #C80032;

}

Let me know if this works for you. I believe that should help.

[mwdewitt]

Thank you for your help, @bryanfarris, but sorry, it did not work. It still highlights everything if I select “Feel Good Candy” and it only highlights “Gloom” when I select that. Sigh. I know there has got to be some way to do this!

[Senff]

This should do it:

body#feelgoodcandy ul#mt-main-nav li.literature li.gloom a, body#gloom ul#mt-main-nav li.literature li.feelgoodcandy a {

background: #000000;

color: #C80032;

}



ul#mt-main-nav li a:hover, ul#mt-extra-nav li a:hover, body#home ul#mt-main-nav li.home a, body#literature ul#mt-main-nav li.literature a, body#contact ul#mt-main-nav li.contact a, body#store ul#mt-main-nav li.store a, body#donations ul#mt-main-nav li.donations a, body#default ul#mt-main-nav li.home a, body#feelgoodcandy ul#mt-main-nav li.literature a, body#gloom ul#mt-main-nav li.literature a, body#feelgoodcandy ul#mt-main-nav li.feelgoodcandy a, body#gloom ul#mt-main-nav li.gloom a {

background: #000000;

color: #FFFFFF;

}

[mwdewitt]

Thank you, @Senff. That sort of fixes it. Now, we need to figure out how to make it highlight a menu option when you roll-over the word. What you gave me is definitely a step in the right direction. Currently, if you select either sub-menu, the menu title and the sub-menu stay highlighted. Now, we need the second option to highlight on roll-over. Thank you once again, @Senff.

Edit: And I just noted that the highlighting feature works when neither sub-menu is selected, but once one of the sub-menus is selected, the other one will not highlight on roll-over.

[mwdewitt]

Bump. I highly apologize for bumping this thread so many times. But it is almost solved! My question is: is the answer so obvious that people are not answering me? Or is it so difficult and that is why only several people have helped me out thus far?

Edit: By the way, just as a side note, I am thanking each and everyone of you that helps me in a blog entry. You guys are amazing!

[Senff]

Add this:

body#feelgoodcandy ul#mt-main-nav li.literature li.gloom a:hover, body#gloom ul#mt-main-nav li.literature li.feelgoodcandy a:hover {

color: #FFFFFF;

}

[mwdewitt]

@Senff, you are a god among men. You helped me when I first started building this website and now you are here to finish it off. Thank you so much for your wonderful and direct help! I actually was reading up on doing roll-overs and I noticed that you basically take the element that you want to do the roll-over on and add “hover” to it, but I am still fairly new to all of this and I could not figure out how to properly tell the internet what I wanted it to do. Thank you again!

[Author]

Posts