• 0
Sign in to follow this  
Followers 0

Highlighting Parent Pages in Menu


Question

Posted · Report post

Hi,

 

I would appreciate some help with the following.

 

If you follow the link http://londonbrideuk.com/mori-lee/mori-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

Share this post


Link to post
Share on other sites

3 answers to this question

  • 0

Posted · Report post

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.com/css/css_link.asp  and you'll probably need the visited option.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0