Jump to content
Sign in to follow this  
honeyberk

CSS Selectors for Secondary Pages

Recommended Posts

honeyberk

Hi -- I have styled the nav background, hover and current states for each page on the site: http://www.drinksoiree.com/ using this CSS: .page-id-138 .main-nav li a:hover { background-color: #a60062 !important; color: #000000 !important; } .page-id-138 .main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover { background-color: #a60062 !important; color: #000000 !important; } .page-id-138 .main-nav .current-menu-item ul li a { background-color: #a60062 !important; color: #000000 !important; } But this page: http://www.drinksoiree.com/wine-drinks/ has dropdown nav for secondary pages, and shows current state on dropdown and no current state on main nav when you're on secondary pages (only shows current state on secondary page in dropdown nav). Can someone pls. point me to the CSS selectors that will turn off the current state on the dropdown nav from the parent page and turn on the current state on the secondary pages for the main nav? Thx, h.

Share this post


Link to post
Share on other sites
Rob
My apologies, but I'm not particularly good with CSS. However, here's some code that we provided to another client. The colors are specific for his site not yours. I don't know if this info will help. You might consider switching the colors on your menu around to white with a black shadow as black on purple is tough to read. [code]/* NAV BACKGROUND AND BORDER UNDER NAV */ .navigation_wrap { border-bottom: 1px solid #bcbcbc !important; background-color: #e8ecef !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */ .main-nav li a { background-color: #e8ecef !important; color: #3f95c7 !important; } /* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */ .main-nav li a:hover { background-color: #ffffff !important; color: #ff9c00 !important; } /* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */ .main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover { background-color: #ffffff !important; color: #ff9c00 !important; } .main-nav .current-menu-item ul li a { background-color: #e8ecef !important; color: #3f95c7 !important; }[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
honeyberk
Thx for posting, but this is the code that I used to do what I've done on the site already. I need code to specifically change the states of the dropdown nav on that one particular page that I mentioned, which this CSS does not do. Good suggestion on the white type, thx. h.

Share this post


Link to post
Share on other sites
Jenny
You asked: [quote]Can someone pls. point me to the CSS selectors that will turn off the current state on the dropdown nav from the parent page and turn on the current state on the secondary pages for the main nav?[/quote] Unless I am reading that wrong, it looks like you've figured it out. The child menu items are highlighting purple when active.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
honeyberk
When you're on the parent page: http://www.drinksoiree.com/wine-drinks/ The child menus are already purple -- I want them to be white until you hover over them. When you're on a child page: http://www.drinksoiree.com/wine-drinks/red-wine-sangria/ The parent menu item is white -- I want it to be purple (current) -- although the child menu items are correct on the child pages. Do you see what I mean? Thx.

Share this post


Link to post
Share on other sites
Jenny
[code].page-id-10 .main-nav .current-menu-item ul li a { background-color: #FFFFFF !important; color: #000000 !important; }[/code] *should* fix it!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
honeyberk
Yes! That totally fixed the parent page issue. One last thing -- the child page issue -- how do I get the parent item "Wine Drinks" to be highlighted on the child pages: http://www.drinksoiree.com/wine-drinks/red-wine-sangria/ etc.? Thx.

Share this post


Link to post
Share on other sites
kastelic
Try one of these: [code].sfHover {background: red !important;} .sfHover a{background: red !important;}[/code] I know its sfHover that gets added to the li element when its child element is hovered over, i'm just not sure of the exact rule, let us know if one of these works.

Share this post


Link to post
Share on other sites
honeyberk
Neither worked. The first one doesn't seem to do anything. The second one highlights the parent and not-current child items when you're in the dropdown nav.

Share this post


Link to post
Share on other sites
honeyberk
Maybe what I asked wasn't clear -- the hover states are fine. It's the current state of the parent nav item on the child pages that is not highlighted now, but which I would like to be highlighted, to note what main nav section you're in (even though you're on a child page). Is that any better? :)

Share this post


Link to post
Share on other sites
catrina
I believe someone asked this before and when I tried to create CSS that would accomplish that, it wouldn't work because technically the child page is the page that is selected (not its parent page) so it's the only one that can be highlighted. Perhaps someone else has been able to accomplish this, but not with CSS and I'm not certain what that hack would be.

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

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  

×