Jump to content
davemoppert

Navigation Styles

Recommended Posts

davemoppert    6
davemoppert

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
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

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
James B    436
James B

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;
}


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

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
Rob    547
Rob

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,

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

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
Rob    547
Rob

Right.  I'm at a loss then.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

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
Danny    1,327
Danny

Alright Dave!

 

Add this to your custom CSS:

 

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

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
davemoppert    6
davemoppert

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

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


×