Jump to content


Photo

Highlighting Parent Pages in Menu

menu parent

  • Please log in to reply
3 replies to this topic

#1 mccooluk

mccooluk

    Advanced Member

  • Members

  • 43 posts
  • Country: Country Flag

Posted 29 August 2013 - 04:51 PM

Hi,

 

I would appreciate some help with the following.

 

If you follow the link http://londonbrideuk...ori-lee-bridal/

 

You will see the designer Mori Lee has 4 child pages. When one of these is selected, I want the parent (the "Mori Lee" menu item) to remain highlighted.

 

I can't seem to separate tha parent and child menu items, everything I do effects them all.

 

Thanks you in advance, if you need any further info please let me know.

 

Chris



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 August 2013 - 08:23 PM

Chris, I'm going to give you a little secret.  Don't tell anyone!

 

Go to Dashboard > Appearance > Menus.  You'll see Screen Options on the top right. Click, and a panel will descend.

 

Tick the option for CSS Classes. Click Screen Options again.

 

Now, find the Mori Lee parent level link and edit it.

 

You'll see a new field for CSS Class.  In that field, let's use mori-lee1.

 

Now, you can create custom code within the curly brackets in this code

.mori-lee1 {

}

 

As for the code you'll enter, I'll refer you to http://www.w3schools...ss/css_link.asp  and you'll probably need the visited option.



#3 mccooluk

mccooluk

    Advanced Member

  • Members

  • 43 posts
  • Country: Country Flag

Posted 30 August 2013 - 06:36 AM

Thanks for the reply Rob.

 

Whilst that is a brilliant secret (Mum's the word) and will definitely be helpful in the future, it unfortunately does not work in this instance.

 

Applying something like:

 

.mori-lee1 {

    letter-spacing: 1px;

}

 

... still effects the 4 sub-menu items!



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 August 2013 - 05:03 AM

That example was to give you the base element.  You're supposed to then add other elements to it. like ul li a etc.  We're not able to design your site, and since this is a customization, you have to do that.   It should be easy to find the existing element, preface it with the class we created, then apply a background color on hover.  When you've applied it to that specific element, it shouldn't affect the others.  Inspection with Firebug for Firefox or Chrome's Inspection tools should help you see the differences between parent and child.  Use only the parent.







Also tagged with one or more of these keywords: menu, parent