Multi-Collection Page with Sticky Sidebar Navigation and Anchor Links

Technical Q&A

Topic summary

A user is creating a multi-collection page with a sticky sidebar navigation using anchor links in the Dawn theme. The implementation includes a custom Liquid section with CSS for both desktop and mobile views.

Current Issues:

  • The sidebar overlaps the main menu, footer, and collection grids on desktop when screen resolution is too small
  • The anchor links don’t function properly—they fail to navigate users to the intended sections when clicked

Technical Context:

  • Uses position: fixed for desktop sidebar and position: sticky for mobile horizontal scroll menu
  • Includes CSS transitions and responsive breakpoints at 768px
  • The user identifies as a beginner with Liquid, HTML, and CSS

Status: The discussion remains open with no solutions provided yet. The user has shared a draft version and complete code snippet for review.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

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!

2

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.