Multi-Collection Page with Sticky Sidebar Navigation and Anchor Links

[ColossalBird]

Hello,

I'm building a page that displays multiple collection grids, along with a sidebar menu on the left (or at the top for mobile). The sidebar should allow users to jump to specific sections of the page using anchor links. I’ve put together a draft version here.

However, as you can see, the sidebar overlaps the main menu, the footer, and even the collection grids on desktop when the user's screen resolution is too small. I'm using the Dawn theme and added the sidebar menu through a custom Liquid section.

Here is the Liquid section:

<div class="menu-ancre-vertical">
  <a href="#shopify-section-template--23873034715464__featured_collection_VMrWb4"> Pommes de terre </a>
  <a href="#shopify-section-template--23873034715464__featured_collection_bH9pXg">Oignons, ails & échalottes</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_e4McGK">Carottes, crudités & radis</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_VKEKU6">Choux, poireaux & navets</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_6Ek3DJ">Courgettes & aubergines</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_ryH7Wf">Poivrons & piments</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_gKG77H">Légumes verts</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_Gm6EVm">Salades</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_p9QbJy">Champignons</a>
  <a href="#shopify-section-template--23873034715464__featured_collection_MNhp9w">Herbes aromatiques</a>
</div>

<style>
  .menu-ancre-vertical {
    position: fixed;
    top: 100px;
    left: 0;
    width: 200px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0);
    padding: 1rem;
    border-right: 1px solid #eee;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  .menu-ancre-vertical a {
    display: block;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: #007ace;
    font-weight: 600;
    padding: 0.5rem;
    border-radius: 8px;
    background-color: rgba(230, 244, 255, 0.7);
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .menu-ancre-vertical a:hover {
    background-color: rgba(204, 232, 255, 0.9);
    color: #005bad;
  }

  .main-content-with-menu {
    margin-left: 220px;
  }

  /* ======= MOBILE ======= */
  @media (max-width: 768px) {
    .menu-ancre-vertical {
      position: -webkit-sticky;
      top: 60px;
      z-index: 2; 
      width: 100%;
      display: flex;
      overflow-x: auto;
      white-space: nowrap;
      padding: 0.5rem 1rem;
      border-right: none;
      border-bottom: 1px solid #eee;
      background: rgba(255, 255, 255, 0.95);
    }

    .menu-ancre-vertical a {
      display: inline-block;
      margin-right: 0.5rem;
      margin-bottom: 0;
      background-color: rgba(230, 244, 255, 0.6);
    }

    .main-content-with-menu {
      margin-left: 0;
    }
  }
</style>

Does anyone know how I could improve it so that it doesn’t overlap with other parts of the page? I am a beginner when it comes to liquid, html and css so I might have missed something?

Thanks in advance!

[Shadab_dev]

Apart from it overlapping I see that it doesn't work as intended, I mean it doesn't take the user to that specific section on click.