Visual theme: reduce space from nested menu options

  • nilla2014 · Member ·

    I’d like to reduce the above and below space of the 2nd-level menu options. For example, selecting Destinations, then:
    Europe>Estonia – there is a lot of space above and below the words “Europe” and “Estonia” for each menu option. This space is what I’d like to reduce as I have more menu options to add.

    Many thanks!

    The blog I need help with is: (visible only to logged in users)

  • innisfreehomestead · Member ·

    Hello there!

    Dropping this code in your custom CSS area should do the trick: 

    .navigation-main ul ul ul li a {
	padding: 10px 20px;
}

    Let me know if that doesn’t work!
    Sage

  • nilla2014 · Member ·

    Hi Sage
    Thanks that worked a treat for the 2nd-level menu options. Do you think I need to reduce the space for the Ist-level options under Destinations or leave as is?

    Also, I’ve been doing some research on user experience and this is what I’ve found for buttons/menu options:
    “The average adult finger pad size is about 10mm wide (a bit less than half an inch), and the Android UI guidelines recommend a minimum tap target size of roughly 7mm, or 48 CSS pixels on a site with a properly-set mobile viewport.”

    In view of the above usability guidelines, maybe I should leave the menu padding as it was?

  • The topic ‘Visual theme: reduce space from nested menu options’ is closed to new replies.