Support » Theme: Shapely » Increase vertical space between items when menu is 2 in lines?

  • It’s sometimes difficult to click the correct menu item, because they are so close together. For example, on some screens the HOME button and RENT PAYMENTS buttons are so close vertically that it may appear you are mousing over the HOME button but if you press click it may still take you to the RENT PAYMENTS page.
    I tried adjusting the padding and margin in the code but this didn’t help. Is there a way in the code to increase the vertical space when the menu spills over into two lines? Thank you for any suggestions, below is the custom css I added that may affect this:
    .main-navigation .menu > li { height: 24px;}
    .main-navigation { clear: both; display: block; width: 100%; padding: 3px 0px 3px 0px;
    margin: 0px 0px 10px 0px; }

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

    Admin Area -> Appearance -> Customize -> Additional CSS

    .main-navigation .menu > li,
    .nav-bar .module:not( .site-title-container ) {
        height: auto !important;
    }

    That worked well, thank you!

    You are most welcome here 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Increase vertical space between items when menu is 2 in lines?’ is closed to new replies.