Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #29180

    Hi guys, since a recent update to the menu plugin I’m assuming the previous custom css isn’t working to override the menu. What custom css do I need to customize the menu font, size, colors, and weight? I’m using typekit so here is font details:

    font-family: “freight-sans-pro”, sans-serif;

    font-style: normal;

    font-weight: 300;

    color:#333;

    active color is #6ab165

    Thanks much,

    Chris

    #139964

    Hi Chris,

    Please try adding following code to Custom CSS in theme options under Styling

    .header_color .main_menu ul:first-child > li > a { font-family: "freight-sans-pro", sans-serif; font-size: 18px!important; font-weight: 300!important; color: #333!important; font-style: normal!important; }

    .header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #6ab165!important; }

    Regards,

    Yigit

    #139965

    Thanks Yigit, that code worked for parent page but not subpages. What do I edit for the subpages to have same settings?

    Thanks much,

    Chris

    #139966

    Hi also, what css do I use to change font in fixed header with social icons and additional navigation. The above worked for the main menu but not the subpages or the top menu navigation. I appreciate your help.

    Thanks much,

    Chris

    #139967

    Hi guys, sorry about so many posts. On the top menu I just applied a span class to that to change the font. In responsive though and I noticed in demo also that the social icons stack right on top of the phone number and links. What code do I edit to add some padding in responsive mode between social icons and phone number / link area in top header?

    Thanks much,

    Chris

    #139968

    Hi Chris,

    Please replace previous CSS code with following one

    .header_color .main_menu ul:first-child > li > a { font-family: "freight-sans-pro", sans-serif; font-size: 18px!important; font-weight: 300!important; color: red!important; font-style: normal!important; }

    .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, #top .header_color .main_menu .menu ul .current-menu-item > a { color: pink!important; }

    ul.sub-menu { font-family: "freight-sans-pro", sans-serif; font-weight: 300!important; color: red!important; font-style: normal!important; }

    #top .main_menu .menu li>a { color: red; font-family: "freight-sans-pro", sans-serif; font-weight: 300!important; font-style: normal!important; }

    #top .header_color .main_menu .menu ul li>a:hover { color: green; }

    #top #menu-item-search.menu-item-search-dropdown>a { font-family: 'entypo-fontello' !important; }

    You just need to change color hex values.

    This code will increase padding under social only on screens smaller than 767px

    @media only screen and (max-width: 767px) { .responsive #header .social_bookmarks { padding-bottom: 20px!important; } }

    Regards,

    Yigit

    #139969

    Thanks, that did it. I appreciate your help.

    Chris

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

The topic ‘menu font change, size, color, active color, font weight’ is closed to new replies.