Jump to content


Photo
- - - - -

Navigation Styles


Best Answer Danny , 03 December 2012 - 10:55 AM

Alright Dave!

 

Add this to your custom CSS:

 

 
.purple.sfHover { background:#BA8ABD;}
.pink.sfHover { background:#F04991;}
.green.sfHover { background:#A0C758;}
Go to the full post


  • Please log in to reply
11 replies to this topic

#1 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 28 November 2012 - 03:55 PM

Any idea what the CSS might be to set the background color of the parent link when you are hovered over one of the secondary links in the navigation?

 

I got most of the customization completed -- all I need now is for the parent link option to stay highlighted when I roll over onto one of the secondary links. 

 

Here is the live site so you can see what I am talking about: 

Please Login or Register to see this Hidden Content

 

 

 

 

 

 



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 28 November 2012 - 04:53 PM

"all I need now is for the parent link option to stay highlighted when I roll over onto one of the secondary links."

 

To clarify, are you looking for a way to get the parent link background to stay a certain color while the visitor is currently viewing a subpage?



#3 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 30 November 2012 - 02:02 AM

No, I want the background of the parent link to stay highlighted when I roll over onto one of the dropdown options.

 

So for example, if you go to 

Please Login or Register to see this Hidden Content

, and roll over the 'How it Works' link in the navigation menu, you will notice that the background becomes purple and drop down options appear. When I roll over one of the dropdown options, I want the parent link (in this case 'How it Works' to remain with a purple background.  

 

Any idea how to do this? I have been fooling around with the CSS for a few days now with no success.  



#4 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 November 2012 - 05:17 AM

Hi there, haven't had a chance to play around with this but the below code accesses the color for the parent item on a submenu. You'll need to set :hover attribute somewhere to get the effect you're looking for, have a play with it see what you come up with. :)

 

Please Login or Register to see this Hidden Content



#5 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 02 December 2012 - 07:07 PM

Thanks James... As frustrating as the nav is in pagelines, I usually can tinker away until I get the CSS to do what I want it to do.  I'm surprised because I've hit a wall.  Let me try to be more clear for a more helpful response:  

 

Basically, each parent link in the primary nav has it's own custom style (i.e. .purple for purple background or .green for green background).  Most of the parent links in the primary nav have a drop down menu. 

 

I want the background color of the primary link to remain highlighted (i.e. purple) when I rollover on of the dropdown options.  Instead, it goes to white when I roll over one of the dropdown options.  

 

Hopefully this is a little more clear.  Any help would be greatly appreciated! Thanks!



#6 Rob

Rob

    One Smart Egg

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

Posted 02 December 2012 - 10:42 PM

Dave, I think you need the active state.  You've got the hover down pat. 

 

To clarify... When a cursor is placed over something, it is in hover state, resulting in the change of the element's color, as desired.  But, if clicked, you want that color to remain in place.  That is an active state, effectively meaning you are actively in that element.

 

The way to achieve this is best described in this:

Please Login or Register to see this Hidden Content

 

I think you need a copy of James' code but need to add

Please Login or Register to see this Hidden Content



#7 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 02 December 2012 - 10:48 PM

I thought the active state only is only effected when you are on that particular page (hence, being an active page).  I am not looking for it to change when it is an active page, I am looking for it to remain the hover color when I roll off of the primary link and onto one of the dropdown options.

 

Does that make sense?



#8 Rob

Rob

    One Smart Egg

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

Posted 02 December 2012 - 11:25 PM

Right.  I'm at a loss then.



#9 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 02 December 2012 - 11:27 PM

Yeah, here is a video link to better illustrate what I am talking about... (SORRY FOR ALL THE BACK AND FORTH CONFUSION!):

 

Please Login or Register to see this Hidden Content



#10 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 02 December 2012 - 11:57 PM

Here are all the custom styles I have created in CSS to accomplish what I have so far... maybe there is an error with my code that is conflicting??? (don't think so, but you never know).

 

Please Login or Register to see this Hidden Content



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 15064 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 03 December 2012 - 10:55 AM   Best Answer

Alright Dave!

 

Add this to your custom CSS:

 

Please Login or Register to see this Hidden Content



#12 davemoppert

davemoppert

    Super Member

  • Members

  • 141 posts
  • Country: Country Flag

Posted 03 December 2012 - 04:07 PM

DANNY! YOU ARE AMAZING! IT WORKS! THANKS SO MUCH!