Issues with Menu overlap in Mobile/Tablet Viewport

[CB_digitalmedia]

I am using a Customised Cassioppeia Template.
My issue is that in my menu system where I have submenus (level 2) when viewed on a mobile phone the Container for the submenus floats outside the viewport on the phone.
I have tried to inspect this and look at the CSS scripts without success - I can see how to change the font size but this does not solve the issue on the Samsung phone.
I am not sure but is this an issue with the alignment of the Container to the Parent Menu?
The URL is https://www.thamessailingclub.co.nz/index.php

Is there anyone who might like to help me with this issue?
Thanks in anticipation.

[Mr. Wimpy]

Okay, I believe this may get you back on track...

Make the menu use the full width

Code: Select all

.navbar {
  flex-basis: 100%;
}

To display the submenu correctly below the parent menu-item on all screens.
The submenu is positioned absolute, so add a left and right position.
Note: In your user.css, on line 551, you have already declared right:0; for these selectors. I don't know why or what effect these changes may have for your design.

Code: Select all

.metismenu.mod-menu .metismenu-item > ul,
.container-header .metismenu > li > a:hover::after {
  right: 0;
  left: 0;
}

Bonus: Unset the right position on bigger screens

Code: Select all

@media (min-width: 700px) {
  .metismenu.mod-menu .metismenu-item > ul,
  .container-header .metismenu > li > a:hover::after {
    right: initial;
  }
}

[CB_digitalmedia]

Thank you - well done. I really appreciate your assistance. Worked after I cleared the cache!