Jump to content


Photo
- - - - -
Resolved

Can't Get The Nav Bar Css To Work! Please Help

navigation css nav bar colors customization

  • Please log in to reply
5 replies to this topic

#1 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 12:52 PM

Hi folks, I've tried everything... I've searched through the forums, docs, etc, tried all the CSS I could find in here and nothing... I can't find the way to customize the colors of my nav bars properly.

The URL:

Please Login or Register to see this Hidden Content



There's 2 nav bars I'm customizing: the brandnav (purple header section with logo and nav), and the classic nav (black nav bar)

Here are the problems:

1. on the Brandnav, I've managed to code everything I wanted properly except the "li" active state when the user is on a child page. For example, the "services" page has a couple of child pages. When a user is in one of those, there's a white background in the "services" link that I can't find a way to remove (should be transparent, or the same purple color as background). Go to this child page so you can see:

Please Login or Register to see this Hidden Content



2. On the Black Nav bar, I'm trying to simply do this:
- no background color on hover
- text color gray
- text color hover: light purple
- text color active: dark purple

That's all!!! And yet nothing I code seems to have an effect...

Here's my CSS code for these two sections at the moment:

Please Login or Register to see this Hidden Content


I appreciate your help with this! We're going live on Friday with the site so I need to resolve this ASAP.

I would also like this opportunity to suggest something to you for a future update: Your framework is so advanced, it great! Customizing Nav colors should not be this hard! I've spent hours and hours on this... Why isn't there a color picker in the admin setting for each nav bar section??? Just include color pickers for text color, background, border, and for normal, hover and active states and you should be able to shake this issue off for good! (I've noticed it's a recurrent issue people have)

Thanks again!

Beny Schonfeld

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 October 2012 - 02:40 PM

1. The selector for your active link needs to be adjusted. When I inspect the active menu item using Firebug, I see this class:

Please Login or Register to see this Hidden Content


You need to use the current-page-ancestor selector to adjust the active item.

2. In this code, the extra li tags are unnecessary (i.e. li li a can just be li a):

Please Login or Register to see this Hidden Content



#3 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 05:43 PM

OK, making progress...

On Brandnav, by targeting the following selector I was able to finally remove that white background,...

Please Login or Register to see this Hidden Content


As for the other navigation bar, the black one, I tried what you suggested above and nothing. Same result... I don't understand it!

Any other suggestions?

#4 Beny Schonfeld

Beny Schonfeld

    Advanced Member

  • Members
  • 60 posts
  • LocationMiami, FL
  • Framework Version:2.3.3
  • Country: Country Flag

Posted 24 October 2012 - 06:10 PM

OK, I went back and deleted all the CSS I had done for the second nav bar (the black one). I simplified a couple of things and now it seems to be working perfectly... I have no idea why I couldn't get this to work before... Maybe I just needed to let it sit for a couple of days :)

Here's the CSS I'm using now:

Please Login or Register to see this Hidden Content



#5 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 October 2012 - 12:25 AM

Excellent, I'm glad you got it sorted. Thank you for sharing the solution with us.

#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 October 2012 - 12:25 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved, navigation, css, nav bar, colors, customization