Menu on 2540pxW & Tablet/Mobile Screen

Home Forums Monument Valley Menu on 2540pxW & Tablet/Mobile Screen

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #18596

    christophertong
    Participant

    Menu on 2540pxW & Tablet/Mobile Screen

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Attached image for your reference.

    1. When view on 2540pxW (QHD) screen, the dropdown menu is too short. Is there a way to extend it to end?

    2. When view in mobile and tablet (have tried Samsung & LG devices and on both Chrome & Firefox), there is a weird black oval overlay on mobile menu. This only happens on mobile and tablet screen, when view in desktop screen with mobile viewport, the black oval is not there. How can I get rid of that?

    Thank you.

    #18598

    Oliver Juhas
    Keymaster

    Hi christophertong,

    1. Thank you for spotting this issue. To fix, please apply this custom CSS:
      @media only screen and (min-width: 55em) {
      	.has-fullwidth-submenu .main-navigation-container li ul {
      		padding-left: 199em;
      		padding-right: 199em;
      		margin-left: -199em;
      		margin-right: -199em;
      	}
      }
    2. Again, thank you for spotting this issue! However, I am only able to confirm it on Chrome and Opera browser (so, probably all WebKit based browsers). Firefox is perfectly fine for me. This really seems like a browser bug, as it was definitely working perfectly fine (at least) when the theme was released. Probably some recent Chrome (WebKit) update introduced this bug (again). It seems to be related to border radius and overflowing rendering, possibly when in animation. To fix this issue immediately, just disable the border radius on mobile menu animation using this custom CSS:
      @media only screen and (max-width: 54.9375em) {
      	.has-navigation-mobile .main-navigation-container {
      		border-radius: 0;
      	}
      }

    I will apply of both these fixes in next theme update.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18602

    christophertong
    Participant

    Dear Oliver,

    Thanks for the solution.

    1. Nicely fixed.
    2. After applying the fix, Firefox is ok now. However, on Chrome, the oval shape somehow still there.

    Regards.

    Christopher

    #18603

    Oliver Juhas
    Keymaster

    Hi Christopher,

    Please try to flush your Chrome browser cache. I have checked your website in Chrome on Windows and also on Android phone and everything works fine there for me.

    Best regards,

    Oliver Juhas
    WebMan Design

    #18613

    christophertong
    Participant

    Dear Oliver,

    You’re right. They are working fine now.

    Thanks for the great support you’ve given so far.

    Regards,

    Christopher

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

You must be logged in to reply to this topic.