Jump to content
Sign in to follow this  

Need Custom Code Help On Navbar (Upgrading From Platformpro)

Recommended Posts


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;

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


Thanks in advance,


Share this post

Link to post
Share on other sites



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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

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

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

Please search our forums, before posting!

Share this post

Link to post
Share on other sites

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

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.

Please search our forums, before posting!

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  

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.

    • PierreFF
      By PierreFF+
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated!