Mobile Menu Close Icon X

  • Resolved utzster

    (@utzster)


    5 years, 10 months ago

    Hello, i noticed on the mobile menu which slides in from the left, the closing icon “X” has no border around it. So to hit it in order to close the menu, you have to click on a pixel of the “X” which is almost impossible with the finger.

    All other icons have the grey borders around and are sensitive to click actions in a much bigger area.

    Is there any way to fix this?
    Thanks

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi @utzster,

    I checked our demo https://demo.themeisle.com/neve/ on mobile and the menu is clickable to close.

    The thing is it shows cross but the click effect is square only. See the screenshot here – https://www.dropbox.com/s/g0h7c1vwm2ihuol/Screenshot%202019-04-15%2014.38.04.png?dl=0

    Though if you want to increase the x size, add the following code to Customize > Additional CSS:

    .icon-bar {
    width: 27px;
}
    Thread Starter utzster

    (@utzster)

    Thanks for your reply Vishakha Patel,

    i already did this, however what i mean is that you have to hit the pixels of the X itself to trigger the close – i’m using chrome and android. So in this setting it is not square but rather a cross area. You can reproduce this in your demo, try moving the mouse curser from below the cross to the center of the cross. The square area appears only the moment you hit the first pixels of the X.

    So sometimes this results in bad UX because it seems that some “clicks” are not working because the user did not hit the X.

    Thanks for looking further into this, making the theme even better.

    BR, Ulf

    hello @utzster,

    I have checked our demo with google chrome on mobile view (Pixel 2 XL resolution) and as you can see in the following video, I can click on the edge of the X and the menu closes -> https://share.vidyard.com/watch/GhfDCm916ZSYJMvopLPGeU.

    I have also checked with my android phone, and the menu is easy to close and the X is responsive enough to my finger.

    Are you still experiencing this issue? Could you please let us know which device are you using so I can try to test it out?

    Thread Starter utzster

    (@utzster)

    Hi, thanks i still got the issue if i test like you with a mobile simulation its hard to see because the cursor is simulated so big.

    Please try the mobile menu with a normal mouse cursor in the desktop version and try moving from below or above the the center of the X – if you dont click on a pixel nothing happens.

    i made this little sketch, where the “o”s mark the dead spots, the “x” mark the pixels of the icon. hope this helps.

     xooox
  xox
   x
  xox 
 xooox

    I experience bad behaviour on the latest samsung note 9 with chrome as well as the latest chrome windows 10.

    i think the easiest solution would be a visible round border like on the hamburger menu itself.

    BR

    • This reply was modified 5 years, 10 months ago by utzster.

    Hi @utzster,

    In order to highlight the mobile menu closing icon, you can try the following code in Dashboard->Appearance->Customize->Additional CSS panel.

    .close-sidebar-panel > .navbar-toggle {
	border: 1px solid #403e3e !important;
}

    Hope this will help.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Menu Close Icon X’ is closed to new replies.