Sign in to follow this  
Followers 0

Need Custom Code Help On Navbar (Upgrading From Platformpro)

6 posts in this topic

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:


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

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

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.

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

  • Similar Content

    • navbar in mobile view
      By micstepl+
      make NavBars (each) choose-able, to break in mobile view "above content" OR "below content"
    • DMS 2 Navbar menu repeats in hamburger mode
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

    • Scroll Nav in Safari not properly sticking to NavBar
      By janpeeters+
      I'm using the Scroll Nav extension on It works mostly great but in Safari 9.0.1 it jumps too high when it sticks. Firefox and Chrome latest versions work just fine in the current setup.
      So I'm wondering if the developer of the plugin is around to give me a clue as to how to fix this? I've thought of using the CSS Classes of the Pagelines Pro plugin but couldn't find a way to get it working.
      Thanks for any suggestions.


    • Change NavBar Menu alignment and font size
      By saur0+
      Hi, I have managed to change the size of the navbar logo to 75px, but I now want to change the size of the font on the menu (20px) and align the menu vertically to the bottom (so it is in line with the bottom of the logo image). I've been playing around with the CSS but can't seem to get it right, if anyone could give me some pointers it would be much appreciated. 
      The site is if you want to take a look at the source. 

    • NavBar Parent links not clickable
      By greatthingsllc
      I have used the NavBar (Content Width) with blue background color selected.   The Parent Links are not clickable, only the child links.   I have tried with "Activate DropDown on Hoover" both selected and unchecked. 
      Only the NAVI (Content Width) allows the parent links to be clickable, but you can not select a background color.    The background color is a requirement from the end user.