Archived

This topic is now archived and is closed to further replies.

  • 0

Need Custom Code Help On Navbar (Upgrading From Platformpro)


Question

Posted · Report post

I finally upgraded (about a year late) to framework, and I am impressed.  Congrats to the developers.

 

I am working on my migration offline so I can take my time with it, but I ran into something I need help with.  In platformpro, I had a piece of code that I used to turn on special highlighting on my primary and secondary navbars.

 

See example here:  http://batonrougecounseling.net/baton-rouge-therapists-approach/client-centered-therapy/

 

The primary nav menu item stays lit orange and the secondary page you're currently on stays lit orange.  Neato eh?

 

Well, in migrating to framework, I have decided to go with the fixed navbar for my primary navigation, and then the secondary navbar below the header as before.  But, the variables (or elements) are different from platformpro and so what I need is some help changing the elements in this following code so that it affects the fixed navbar:

 

body #primary-nav a{color:#e1dddd;background-color:transparent}
body #primary-nav .current-menu-item a{color:#fad53e;font-weight:400;background-color:transparent;}
body #primary-nav .main-nav li a:hover {color:#ffffff;font-weight:400;background:transparent;}

body #secondnav a{color:#e1dddd;background-color:transparent}
body #secondnav .current-menu-item a{color:#fad53e;font-weight:400;background-color:transparent;}
body #secondnav li a:hover {color:#ffffff;font-weight:400;background:transparent;}

body #header #primary-nav .main-nav li.current-page-ancestor a, 
body #header #primary-nav .main-nav li.current_page_item a, 
body #header #primary-nav .main-nav li.current-page-ancestor ul a, 
body #header #primary-nav .main-nav li.current_page_item ul a,
body #header #primary-nav .main-nav li.current_page_item a{color:#fad53e;
background-color:transparent;}

Sorry, I realized I should have posted this in the Customization section.  Can't seem to change it myself.

 

Thanks in advance,

Todd

Share this post


Link to post
Share on other sites

5 answers to this question

Posted · Report post

I tried the code and it didn't work.  I actually ended up putting together this, which basically works:

 

#site .section-navbar.fixed-top .navline a{color:#e1dddd;background-color:transparent}
#site .section-navbar.fixed-top .navline .current-menu-item a{color:#f4a221;background-color:transparent;}
#site .section-navbar.fixed-top .navline li a:hover {color:#ffffff;background:transparent;}

#secondnav a{color:#e1dddd;background-color:transparent;}
#secondnav .current-menu-item a{color:#f4a221;background-color:transparent;}
#secondnav li a:hover {color:#ffffff;background:transparent;}

#site .section-navbar.fixed-top .navline li.current-page-ancestor a, 
#site .section-navbar.fixed-top .navline li.current_page_item a, 
#site .section-navbar.fixed-top .navline li.current-page-ancestor ul a, 
#site .section-navbar.fixed-top .navline li.current_page_item ul a,
#site .section-navbar.fixed-top .navline li.current_page_item a{color:#f4a221;background-color:transparent;}

Not a very elegant solution, I suppose, but it'll do.  Not sure why your code didn't work.  Thank you for your help, though.

Share this post


Link to post
Share on other sites

Posted · Report post

I tried using firebug to figure it out, but I just can't make it work.  Anyone?

Share this post


Link to post
Share on other sites

Posted · Report post

Hi Todd,

 

Add the following code:

 

 

// NavBar
#site .navbar .navline > li.current-menu-item > a, #site .navbar .navline > li.current-page-ancestor a { color: red; }
// Secondary Nav
#site .secondnav_menu li.current_page_item a { color: red; }

Share this post


Link to post
Share on other sites

Posted · Report post

hmm, the code I gave you most certainly worked, as I tested before hand on my test site, also you shouldn't use ID to target elements in your custom CSS, all sections have classes which should be used in instead, like I did for the second nav above.

Share this post


Link to post
Share on other sites

Posted · Report post

Todd,

 

Using Firebug (www.getfirebug.com) you may also identify the elements of the NavBar and Secondary Nav, then apply your CSS method, which is, as you said, Neato, to that element in Custom Code or in the child theme's style.css.

 

I'm no CSS expert, but I'm pretty sure this should be relatively easy. I don't think you need the body tag.

Share this post


Link to post
Share on other sites