QuickStep

Custom Menu Padding Height

  • nakakubonakakubo
    I need to set a lowest height for responsive menu item padding to adjust the navigation to mobile device. My custom menu has too many sub-items, so, it's impossible to display all items together.
    Here is the link: http://carnaval2013.guaruja.sp.gov.br/
  • JoshuaJoshuaAdmin
    Even at the smallest padding, it won't fit all those items onto a mobile screen since you have so many. I would set the menu to stay at the top of the page so when opened, users can scroll down the menu. You can do this by adding the following to your Custom CSS:

    @media all and (max-width: 800px) {
    .menu-button, nav[role="navigation"] {
    position: absolute;
    }
    }
  • nakakubonakakubo
    Hi Joshua,

    the solution works well, but I still have a problem on iPhone. The menu has too many itens, and sometimes when scrolldown the page with the menu opened, the site crashes and the menu collapse. And the user must refresh the page to fix it.

    How can I set a smaller top and bottom margins for each menu item to minimize the necessities of scrolling menu?

    I think that the both solutions may work well.
  • JoshuaJoshuaAdmin
    Add this changing the 12px to whatever height padding you'd like to use:

    @media all and (max-width: 800px) {
    [role="navigation"] li a {
    padding: 12px 43px;
    }
    }
  • kevinmcalearkevinmcalear
    Is there a way to hide submenu items so upon tapping them you see more of the menu? Also, this doesn't fix the scrolling problem and even with the implemented css code.
  • JoshuaJoshuaAdmin
    Did you add the code closer to the top of the page? This is the one that fixes the menu. If not, link to your page so I can take a look.
  • kevinmcalearkevinmcalear
    I found a work around by just adjusting the padding (the second chunk of code) but when implementing the first part of code it didn't allow me to scroll the menu. Would there be a way to hide sub menu items and expand them upon a tap? Also, the site is visualconstructionmedia.com
  • JoshuaJoshuaAdmin
    No, not easily. Since the parent menu items are actual pages and meant to be scrolled to when clicked, the browser would either have to scroll to that page or open the sub-menu but not both. This user interface would be very confusing for users.
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Apply for Membership

Categories

Tagged