Anchor menu overlaps page content on mobile.

[DanielPerry]

Anchor menu overlaps page content on mobile.
Not sure if I’m missing an option here, or if its a bug.
Example.

Topic

[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.

[Marius1989]

A solution to your question would be:

#grve-page-anchor {
    height: auto;
}

There might be some issues with fixed, shrink, scroll up headers, etc. I guess this is why it requires a fixed height, but this is easy to find out just by testing.

To avoid any potential issues, you could wrap this code inside media queries of max-width 1023px, this is the width where the responsive header comes into play by default ( I guess ). So there won’t be any issues with the desktop headers.

• This reply was modified 4 years, 4 months ago by Marius1989.

[DanielPerry]

Perfect, thats awesome, thanks very much 🙂

[Marius1989]

Glad you like it.
Looks pretty sleek on your site!

[Author]

Replies