Jump to content


Photo
- - - - -

Need help on Navigation active & hover colors


  • Please log in to reply
7 replies to this topic

#1 tufts_16

tufts_16

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 18 October 2011 - 06:06 PM

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:

Please Login or Register to see this Hidden Content

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

#2 Rob

Rob

    One Smart Egg

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

Posted 18 October 2011 - 06:40 PM

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

#3 tufts_16

tufts_16

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 18 October 2011 - 06:47 PM

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

#4 Rob

Rob

    One Smart Egg

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

Posted 18 October 2011 - 06:52 PM

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.

#5 tufts_16

tufts_16

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 18 October 2011 - 08:15 PM

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

Please Login or Register to see this Hidden Content

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

#6 tufts_16

tufts_16

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 18 October 2011 - 08:27 PM

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

#7 kastelic

kastelic

    Advocate

  • Members

  • 3081 posts
  • Country: Country Flag

Posted 18 October 2011 - 10:24 PM

I think this is what you need:

Please Login or Register to see this Hidden Content



#8 tufts_16

tufts_16

    Member

  • Members
  • 17 posts
  • Framework Version:latest
  • Country: Country Flag

Posted 14 November 2011 - 04:58 PM

Thank you!