Tagged: , , , , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 7, 2013 at 5:16 am #29180
    comlor

    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

    September 7, 2013 at 2:55 pm #139964
    Yigit

    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

    September 7, 2013 at 7:32 pm #139965
    comlor

    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

    September 7, 2013 at 10:03 pm #139966
    comlor

    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

    September 7, 2013 at 10:26 pm #139967
    comlor

    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

    September 8, 2013 at 2:52 pm #139968
    Yigit

    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

    September 8, 2013 at 11:18 pm #139969
    comlor

    Thanks, that did it. I appreciate your help.

    Chris

  • Author
    Posts
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.