Adjusting Size of Hamburger Icon in Menu

  • I seem to be having an issue where the hamburger icon appears too large when it is activated on a smaller or mobile screen. The same issue happens for the drop down icon when subpages are added in the menu.

    I was curious if there is a way to adjust the sizing of the icons in the settings or if there is some specific CSS I can add to address this issue? Any help would be much appreciated!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator jordesign

    (@jordesign)

    Hi @vegpack,
    Adding CSS like this to the Custom CSS in the customizer should bring the size down,
    and you can tweak the width and height (and top position) to get it the size and position you’d like.

    .menu-toggle .icon {
    margin-right: 0.5em;
    top: -2px;
    width: 23px;
    height: 17px;
    top: 3px;
}
    • This reply was modified 6 years, 7 months ago by jordesign.
    Thread Starter vegpack

    (@vegpack)

    This helped a lot, thank you! Is there a way I can modify this css to adjust the oversized drop down icon when I make a sub page as well?

    Moderator jordesign

    (@jordesign)

    Hey @vegpack,
    glad that worked well ??

    You should be able to do a similar thing for the dropdown icon with this CSS.

    #top-menu li a .icon {
    width: 23px;
    height: 19px;
    top: 5px;
}
    Thread Starter vegpack

    (@vegpack)

    I appreciate it @jordesign! Is there an additional one I can use to decrease the drop down icon for the mobile screen as well?

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adjusting Size of Hamburger Icon in Menu’ is closed to new replies.