Pagelines Framework 2.0 – Change Nav Menu Text Color

Problem: I can’t change the color of the text in the navigation using CSS. It’s way too confusing, and the SuckerFish nav CSS seems to always override my custom CSS. And there’s no way to change the color of nav text in the admin. Ugh!

Note per the PageLines Forum: PageLines Framework 2.0’s Color Controls for navigation aren’t [in the admin] anymore. Custom CSS will be needed to change them.

Solution (Source: rangelone, PageLines moderator): The following code is not specific to your site and provided for informative purposes only, to provide an example of several different elements for the menu. Look through it and you’ll see how colors are changed. I’d also suggest you get Firebug for Firefox to help you find each element. The colors should be changed if you use any of this, to suit your needs.

/* NAV BACKGROUND AND BORDER UNDER NAV */
.navigation_wrap {
    border-bottom: 1px solid #bcbcbc !important;
    background-color: #e8ecef !important;
}
/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND (NO HOVER) */
.main-nav li a {
    background-color: #e8ecef !important;
    color: #3f95c7 !important;
}
/* TO CHANGE THE COLOR OF THE NAV TEXT AND BACKGROUND ON HOVER */
.main-nav li a:hover {
    background-color: #ffffff !important;
    color: #ff9c00 !important;
}
/* TO MAKE THE ACTIVE MENU APPEAR LIKE THE REST */
.main-nav .current-menu-item a, .main-nav .current-menu-item ul li a:hover {
    background-color: #ffffff !important;
    color: #ff9c00 !important;
}
.main-nav .current-menu-item ul li a {
    background-color: #e8ecef !important;
    color: #3f95c7 !important;
}