• 0
Sign in to follow this  
Followers 0

Need help on Navigation active & hover colors

Question

Posted · Report post

Struggling with getting my current page to stay with the blue background and white letters. The Active nav keeps showing up all white background and text. Here is my custom css: I can't tell what I might be doing wrong. Here is the test site: http://sites.tufts.edu/techconnect/ I also noticed my widget titles were inheriting the white text from the nav - I tried to change it back to blue, but it's not working. Please - any help to simplify the menu CSS, would be hugely helpful. #primary-nav { background: #5091CD; } #widget-title { color: #5091cd; } #nav_row.main_nav, ul.sf-menu ul li { background: #5091cd; } ul.sf-menu, .sf-menu {background: #5091cd;} ul.sf-menu, a.sf-with-ul {background: #5091cd;} ul#.current_page_item { background: #5091cd; } ul#.current-menu-item { background: #5091cd; } ul#menu-main-menu li#menu-item .current-menu-item {background: #5091cd;} #menu-primary-nav {background :#5091cd; color:#ffffff;} .main_nav {background: #5091CD;} .main_nav ul.sf-menu a, .sf-menu a:visited, #featurenav a, {background: #5091cd;} .sub-menu {background: #5091cd;} .main-nav li a:hover { background: #5091cd; } .main-nav li a:visited { background: #5091cd; } .main-nav li a:active { background: #5091cd; } .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a { background: #5091cd; color: #ffffff; }

Share this post


Link to post
Share on other sites

7 answers to this question

  • 0

Posted · Report post

Have you simply tried using the menu color settings in PlatformPro Settings under Design Control?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I really need the entire blue nav bar to go the length of the page, which I did with custom css, and I need the on state of the active navigation to be blue with white text. Currently, the active page is white with white text. Other than that, the drop down being light gray, with black text is fine (on hover). Trying to get this site to match an existing (or soon to be existing) service desk module for an IT dept., and I'm pretty much flying solo here...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Okay. You obviously did well getting the nav bar background fully across the site, but then you went on to color everything with CSS. I'd suggest you go into the Design Control settings and see what you can do there. If you read the fine print for each option there, and the side blurbs, they'll tell you which does hovers, backgrounds, text colors in nav, etc.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

The design control don't help me in the way you think. I'm very specifically trying to control the nav bar, and not things like the border colors and input background colors within the body of the page. All I want is the active nav button to be blue with white text, every time, all the time. When you hover over it, you get the light gray with black text. It is so simple, but the Home button still comes out white after you have visited it (and so on for the other menu items). Is there any way you can - or anyone - can look at my css and maybe point out where I'm missing something? I *think* I have it... http://sites.tufts.edu/techconnect/ #primary-nav {background: #5091CD;} #menu-primary-nav {background :#5091cd; color:#ffffff;} .main_nav li a:hover, a:visited a {background: #5091CD;} .main_nav ul.sf-menu a, .sf-menu a:visited {background: #5091CD;} .main_nav ul.sf-menu a, .sf-menu a:visited, #featurenav a, {background: #5091cd;} .main-nav li.current-page-ancestor a, .main-nav li.current_page_item a, .main-nav li.current-page-ancestor ul a, .main-nav li.current_page_item ul a {background: #5091cd;} #nav_row.main_nav, ul.sf-menu ul li {background: #5091cd;} #subnav_row li a {background:5091CD;} .sf-menu li li, .sf-menu li li, .sf-menu li li li {background: #5091cd;} ul.sf-menu, .sf-menu {background: #5091cd;} ul.sf-menu, a.sf-with-ul {background: #5091cd;} ul#menu-main-menu li#menu-item .current-menu-item {background: #5091cd;} ul.current_page_item {background: #5091cd;} .sub-menu {background: #5091cd;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

But it only works in Chrome. Doesn't work in Safari or Firefox. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I think this is what you need: [code] .sf-menu li {background: blue !important } [/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you!

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