Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #26710

    I’ve been pulling my hair out for hours trying to customize colors that don’t exist in the CSS style sheet (colors made up by the theme).

    What I need to accomplish is:

    – Change navigation menu (only below logo) background color

    – Change navigation menu font size

    – Change navigation menu padding

    Can you provide some insight on overriding these phantom colors?

    The Quick CSS box seems like it could be a useful feature, but it’s almost impossible to figure out without digging into your source code and reverse engineering the theme.

    Assistance would be appreciated!

    #131356

    Hi,

    You can use this codes on your custom.css or Quick CSS:

    - Change navigation menu (only below logo) background color

    .header_color .main_menu ul {
    background: red;
    }

    - Change navigation menu font size

    .bottom_nav_header.social_header .main_menu ul:first-child>li a {
    font-size: 15px;
    }

    Change navigation menu padding

    .main_menu ul:first-child > li > a {
    padding: 0 20px;
    }

    Change the values.

    Regards,

    Ismael

    #131357

    Ismael,

    Thank you for the fast reply! Still needing some help here.

    I am using “header with social icons and bottom” with “stretched layout” styling.

    There are three sections of the header. Here’s what I’m trying to accomplish:

    – Set background color of the top navigation bar (background color needs to be full width, the previous code you gave only sets the link background color)

    – Set font color for both links and small info text on top navigation bar

    – No background color behind the logo

    – Set background color for the main navigation bar and drop down menus

    – Set font color for main navigation bar (right now it derives two custom dynamic colors, one for the drop down menus, and one for the top level links) I need to change both.

    The CSS code on the base level is a nightmare is sort out with this theme. I thought I was good with CSS until I tried making sense of the overly complex code behind this theme.

    Appreciate your help.

    #131358

    1) Use following css code to change the bg color of the top navigation bar

    .header_color .container_wrap_meta{
    background: #f8f8f8;
    }

    2) For the link color use

    .header_color .sub_menu>ul>li>a{
    color: #f8f8f8;
    }

    3) That’s not possible. If the logo is transparent you’ll always see the bg color of the container behind the logo (eg by default white like here: http://www.kriesi.at/themes/enfold/homepage/home-v6-classic-4-column/ )

    4) You can change the link bg color & the dropdown bg color with

    .bottom_nav_header.social_header .main_menu ul:first-child > li a, #header_main_alternate, .bottom_nav_header.social_header .main_menu ul:first-child {
    background: #f8f8f8;
    }

    5) Change the color with

    .header_color .main_menu ul:first-child > li a:hover, .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a, .header_color .main_menu ul:first-child > li.active-parent-item > a{
    color: #f8f8f8;
    }

    for the selected/active item and

    .bottom_nav_header.social_header .main_menu ul:first-child > li a{
    color: #f8f8f8;
    }

    for all other menu items.

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Setting Navigation Text Color, Setting Font Size’ is closed to new replies.