Archived

This topic is now archived and is closed to further replies.

  • 0

Navigation Styles

Question

Posted · Report post

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: http://updated-kid2kid.com

 

 

 

 

 

 

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Alright Dave!

 

Add this to your custom CSS:

 

.purple.sfHover { background:#BA8ABD;}
.pink.sfHover { background:#F04991;}
.green.sfHover { background:#A0C758;}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

"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?

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://updated-kid2kid.com, 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.  

Share this post


Link to post
Share on other sites

Posted · Report post

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. :)

 

.main-nav .current-menu-ancestor a, .main-nav li.current-menu-ancestor ul a, .main-nav li.current_page_item a, .main-nav li.current-menu-item a, .main-nav li.current_page_parent a, .sf-menu li li, .sf-menu li li li {
    background: none repeat scroll 0 0 #7D00F5 !important;
}

Share this post


Link to post
Share on other sites

Posted · Report post

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!

Share this post


Link to post
Share on other sites

Posted · Report post

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: http://www.w3schools.com/cssref/sel_active.asp

 

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

.main-nav li.current-menu-item a:active,

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

Right.  I'm at a loss then.

Share this post


Link to post
Share on other sites

Posted · Report post

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).

 

.main-nav li.navlogo a:hover,
.main-nav li.navlogo a,
.main-nav li.current_page_item .navlogo a {
background: transparent !important;
margin-top:-18px;
}

.main-nav li.dtm a,
.main-nav li.dtm a:hover {
background: url("http://updated-kid2kid.com/wp-content/uploads/2012/11/doortomore.png'>http://updated-kid2kid.com/wp-content/uploads/2012/11/doortomore.png") no-repeat center;
min-width: 70px;
text-align: center;
}

.main_nav ul {
float: none;
text-align: center;
margin-top:-15px;
}

.main_nav ul li a {
color: #565656;
font-size: 13px;
}

.main_nav ul li.purple a:hover {
background: #ba8abd;
color: #ffffff;
}

.main_nav li.purple ul {
border: 10px solid #ba8abd;
padding: 0px;
}

.main_nav ul li.yellow a:hover {
background: #fec532 url("http://updated-kid2kid.com/wp-content/uploads/2012/11/doortomore.png'>http://updated-kid2kid.com/wp-content/uploads/2012/11/doortomore.png") no-repeat center;
color: #ffffff;
}

.main_nav li.yellow ul {
border: 10px solid #fec532;
padding: 0px;
}

.main_nav ul li.pink a:hover {
background: #f04991;
color: #ffffff;
}

.main_nav li.pink ul {
border: 10px solid #f04991;
padding: 0px;
}

.main_nav ul li.green a:hover {
background: #a0c758;
color: #ffffff;
}

.main_nav li.green ul {
border: 10px solid #a0c758;
padding: 0px;
}

.main_nav ul li.blue a:hover {
background: #1576bd;
color: #ffffff;
}

.main_nav li.blue ul {
border: 10px solid #1576bd;
padding: 0px;
}

.main_nav ul li.teal a:hover {
background: #80cfd2;
color:#ffffff;
}

.main_nav li.teal ul {
border: 10px solid #80cfd2;
padding: 0px;
}

.main_nav ul li {
float: none;
display: inline-block;
}

.main-nav li a {
padding-top: 65px !important;
padding-bottom: 65px !important;
}

.main-nav ul li a {
padding: 15px !important;
}

Share this post


Link to post
Share on other sites