Reply To: Anchor menu overlaps page content on mobile.

[Marius1989]

Hey Dan.

Try the following code, hope you like it.

@media only screen and (max-width: 775px) {
  .grve-anchor-menu .grve-anchor-wrapper .grve-container {
    width: 100%;
    max-width: 100%;
    margin-left: 28px;
  }
  .grve-wrapper.grve-anchor-wrapper:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 61%, rgba(255,255,255,1) 100%);
    pointer-events: none;
  }
 .grve-anchor-menu ul {
    overflow-x: auto;
    white-space: nowrap;
    padding-right: 160px;
  }
}

Disclaimer: This is not an answer to your question, just my personal solution for better UI/UX, as soon as the anchor menu items takes too much place on smaller screens. I also added a small visual indicator, so the user knows there is still some content, when swiping the anchor menu.