Secondary Menu – Font Size / Row Height

Solved11 replies3 participantsUpdated by Rose Tyler

  • Avatar: georcarson
    George
    Participant

    Can you please let me know the css code for reducing the font size and the vertical height of each entry in the Secondary menu. I want to reduce vertical of the menu. Thanks.

    #153359 Copied

    11 Answers

    Avatar: 8theme
    8theme
    Support staff

    Hello,

    .secondary-menu-wrapper .menu li > a {
	font-size:12px;
  	padding-top:5px;
  	padding-bottom:5px;
}

    Regards

    #153404 Copied
    Avatar: georcarson
    George
    Participant

    Thanks. That works great in reducing font size and padding above/below menu title, but how about reducing the vertical height of each Title box itself?

    #153495 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Also use this code:

    .global-header-center.et-secondary-menu-on .secondary-menu-wrapper .menu > li > a {
    padding-top: 10px; 
    padding-bottom: 10px; 
}

    Regards

    #153563 Copied
    Avatar: georcarson
    George
    Participant

    Unfortunately neither of the 2 css code snippets you provided had any affect in reducing the vertical height of the Secondary Menu Title rows. The font size adjustment worked great.

    #153571 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Please, add !important http://prntscr.com/e2pss8

    Regards

    #153573 Copied
    Avatar: georcarson
    George
    Participant

    That did it!!

    Can you also give me the css code for doing the same thing on the mobile menu? Changing font size and reducing vertical height of the menu title box.

    #153586 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    .mobile-menu-wrapper .menu > li > a {
    line-height: 45px !important;
    font-size: 12px;
}
.mobile-menu-wrapper .menu > li .open-child:before {
    line-height: 45px;
}
.mobile-menu-wrapper .links li a {
    line-height: 45px !important;
}
.mobile-menu-wrapper .mobile-sidebar-widget {
    padding-top: 15px;
    padding-bottom: 15px;
}

    Regards

    #153748 Copied
    Avatar: georcarson
    George
    Participant

    Thanks. This css code works great in adjusting the main mobile menu BUT if there it does not change anything on the 2nd level menu which remains the original font size and vertical height for each row. Looks like there is some additional coding. Thanks.

    #153781 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    Change previous code to:

    .mobile-menu-wrapper .menu > li > a, .mobile-menu-wrapper .menu > li .sub-menu li a {
    line-height: 45px !important;
    font-size: 12px;
}
.mobile-menu-wrapper .menu > li .open-child:before, .mobile-menu-wrapper .menu > li .sub-menu .menu-back:before {
    line-height: 45px;
}
.mobile-menu-wrapper .links li a {
    line-height: 45px !important;
}
.mobile-menu-wrapper .mobile-sidebar-widget {
    padding-top: 15px;
    padding-bottom: 15px;
}

    Regards

    #153785 Copied
    Avatar: georcarson
    George
    Participant

    Thanks! Your new css changes font size/row height just fine on the mobile menu as requested. Appreciate the help.

    #153843 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff

    Hello,

    You’re welcome!

    Regards

    #153897 Copied

The issue related to '‘Secondary Menu – Font Size / Row Height’' has been successfully resolved, and the topic is now closed for further responses