Adjusting the Mobile Menu Tap Target Size

Asked on February 15, 2016 in Troubleshooting.

Hello,

I realise there is already a post on this that states it is answered, however after adding the
suggested code form post: https://docs.layerswp.com/forums/question/mobile-menu-tap-targets-too-small/

I still get a tap target warning when testing in googles PageSpeed tool.

So far I have added the following CSS:

.invert .nav-vertical li a {
margin: 2px 0px 2px 0px;
}

.off-canvas-right{font-size: 2.0rem !important;}
.off-canvas-right .nav-vertical .sub-menu{font-size: 1.7rem !important;}

Is there something extra I may be missing? Any help greatly appreciated.

Rickerby Layers User
Reply
  • Possible Answers to Your Question:

  • 1 Answer(s)
    Answered on February 18, 2016.

    Hi there,

    Your site configuration is unique, so the CSS selectors you need may differ from those posted in the other answer.  Using DevKit in mobile view, or a mobile viewer like responsinator.com, open the mobile menu and right-click and choose Inspect on one of the links. This will bring up the inspector panel showing you the menu HTML and the associated CSS on the right side. Clicking on a different HTML tag will show the associated CSS for that element’s classes.  For example, each row of your header menu uses this selector, so to make it fatter, add padding or set a height in pixels.:

    
    section[class*=' off-canvas-'] .nav-vertical .sub-menu li {
    
    padding: 10px;
    
    height: 32px;
    
    }
    
    
    Reply