I have built a terms of condition style anchors links to quickly scroll through the available brands(Designers) on our online store. Please open the website here (https://t.ly/LzyYE) and check the mobile navigation.
If you go to menswear, and then Designer, the TOC style anchors show up on the right side. Choosing a letter will scroll down to the anchor. This works fine.
But if you go to womenswear, and then Designer, and now choose a letter, the layout of the page jumps and the anchor links end up on the left side of the screen.
I've been trying to find the cause of this "jump" but I cant seem to find it. Can anyone point me to the right direction?
Here is the code of the TOC container:
.toc { display: grid; justify-content: space-between; grid-template-columns: 1fr auto;}.toc-column { flex: 1; padding: 0 10px;}.navigation li { list-style: none; vertical-align: top;}
<div class="navigation__toc-container" style="display: block; transform: translateX(0%);"><div class="toc"><div class="toc-column"><ul class="toc-links"><li class="letter-collection #" id="#MobileNav"><a class="toc-anchor" href="#">#</a><ul><li><a href="/collections/032c">032c</a></li><li><a href="/collections/1017-alyx-9sm">1017 ALYX 9SM</a></li><li><a href="/collections/123-rivington">123 RIVINGTON</a></li></ul></li><li class="letter-collection A" id="AMobileNav"><a class="toc-anchor" href="#A">A</a><ul><li><a href="/collections/a-better-feeling">A Better Feeling</a></li><li><a href="/collections/a-cold-wall">A-COLD-WALL*</a></li><li><a href="/collections/acne-studios">Acne Studios</a></li><li><a href="/collections/adidas">Adidas</a></li><li><a href="/collections/alchemist">ALCHEMIST</a></li><li><a href="/collections/ami">Ami Paris</a></li><li><a href="/collections/amiri">Amiri</a></li><li><a href="/collections/ansh46">ANSH46</a></li><li><a href="/collections/ansh46-the-new-uniform">ANSH46 "THE NEW UNIFORM"</a></li><li><a href="/collections/ansh46-x-adwoa-by-dagye">ANSH46 X ADWOA</a></li><li><a href="/collections/ansh46-x-banlieue">ANSH46 X Banlieue</a></li><li><a href="/collections/ansh46-x-jade-paton">ANSH46 X JADE PATON CERAMICS</a></li></ul></li><li class="letter-collection B" id="BMobileNav"><a class="toc-anchor" href="#B">B</a><ul><li><a href="/collections/b1-archive">B1 ARCHIVE</a></li><li><a href="/collections/betsy-johnson">Betsey Johnson</a></li><li><a href="/collections/better-with-age-1">Better With Age</a></li><li><a href="/collections/birckenstock">Birkenstock</a></li><li><a href="/collections/blumarine">Blumarine</a></li></ul></li><li class="letter-collection C" id="CMobileNav"><a class="toc-anchor" href="#C">C</a><ul><li><a href="/collections/casablanca">Casablanca</a></li><li><a href="/collections/chopova-lowena">Chopova Lowena</a></li></ul></li><li class="letter-collection D" id="DMobileNav"><a class="toc-anchor" href="#D">D</a><ul><li><a href="/collections/diesel">Diesel</a></li><li><a href="/collections/dion-lee">Dion Lee</a></li></ul></li><li class="letter-collection E" id="EMobileNav"><a class="toc-anchor" href="#E">E</a><ul><li><a href="/collections/enfants-riches-deprimes">Enfants Riches Déprimés</a></li><li><a href="/collections/entire-studios">Entire Studios</a></li></ul></li><li class="letter-collection F" id="FMobileNav"><a class="toc-anchor" href="#F">F</a><ul><li><a href="/collections/flaneur">FLÂNEUR</a></li></ul></li><li class="letter-collection G" id="GMobileNav"><a class="toc-anchor" href="#G">G</a><ul><li><a href="/collections/gallery-dept">Gallery Dept.</a></li></ul></li><li class="letter-collection H" id="HMobileNav"><a class="toc-anchor" href="#H">H</a><ul><li><a href="/collections/heron-preston">Heron Preston</a></li></ul></li><li class="letter-collection I" id="IMobileNav"><a class="toc-anchor" href="#I">I</a><ul><li><a href="/collections/issey-miyake">ISSEY MIYAKE</a></li></ul></li><li class="letter-collection J" id="JMobileNav"><a class="toc-anchor" href="#J">J</a><ul><li><a href="/collections/jacquemus">Jacquemus</a></li><li><a href="/collections/jil-sander">Jil Sander</a></li><li><a href="/collections/jiyongkim">JiyongKim</a></li><li><a href="/collections/juun-j">Juun.J</a></li></ul></li><li class="letter-collection K" id="KMobileNav"><a class="toc-anchor" href="#K">K</a><ul></ul></li><li class="letter-collection L" id="LMobileNav"><a class="toc-anchor" href="#L">L</a><ul><li><a href="/collections/lado-bokuchava-2">Lado Bokuchava</a></li><li><a href="/collections/lanvin">Lanvin</a></li><li><a href="/collections/lemaire">Lemaire</a></li><li><a href="/collections/loewe">Loewe</a></li><li><a href="/collections/los-angeles-vintage">Los Angeles Vintage</a></li><li><a href="/collections/luu-dan">LU'U DAN</a></li></ul></li><li class="letter-collection M" id="MMobileNav"><a class="toc-anchor" href="#M">M</a><ul><li><a href="/collections/maison-margiela">Maison Margiela</a></li><li><a href="/collections/maison-mihara-yasuhiro">Maison Mihara Yasuhiro</a></li><li><a href="/collections/isabel-marant">Marant Men</a></li><li><a href="/collections/marine-serre">Marine Serre</a></li><li><a href="/collections/marni">Marni</a></li><li><a href="/collections/martine-rose">Martine Rose</a></li><li><a href="/collections/misbhv">MISBHV</a></li><li><a href="/collections/mm6">MM6</a></li><li><a href="/collections/mowalola">Mowalola</a></li><li><a href="/collections/mugler">Mugler</a></li></ul></li><li class="letter-collection N" id="NMobileNav"><a class="toc-anchor" href="#N">N</a><ul><li><a href="/collections/namesake">NAMESAKE</a></li><li><a href="/collections/nanushka">Nanushka</a></li><li><a href="/collections/new-balance">New Balance</a></li><li><a href="/collections/ninamounah">Ninamounah</a></li></ul></li><li class="letter-collection O" id="OMobileNav"><a class="toc-anchor" href="#O">O</a><ul><li><a href="/collections/ottolinger">Ottolinger</a></li></ul></li><li class="letter-collection P" id="PMobileNav"><a class="toc-anchor" href="#P">P</a><ul></ul></li><li class="letter-collection Q" id="QMobileNav"><a class="toc-anchor" href="#Q">Q</a><ul></ul></li><li class="letter-collection R" id="RMobileNav"><a class="toc-anchor" href="#R">R</a><ul><li><a href="/collections/rhude">RHUDE</a></li><li><a href="/collections/rick-owens">Rick Owens</a></li><li><a href="/collections/rick-owens-drkshdw">Rick Owens DRKSHDW</a></li><li><a href="/collections/rick-owens-lilies">Rick Owens Lilies</a></li></ul></li><li class="letter-collection S" id="SMobileNav"><a class="toc-anchor" href="#S">S</a><ul><li><a href="/collections/salomon">Salomon</a></li><li><a href="/collections/sami-miro">Sami Miro</a></li><li><a href="/collections/satoshi-nakamoto">Satoshi Nakamoto</a></li><li><a href="/collections/srvc">SRVC</a></li><li><a href="/collections/stone-island">Stone Island</a></li></ul></li><li class="letter-collection T" id="TMobileNav"><a class="toc-anchor" href="#T">T</a><ul><li><a href="/collections/the-attico">The Attico</a></li><li><a href="/collections/the-north-face">The North Face</a></li></ul></li><li class="letter-collection U" id="UMobileNav"><a class="toc-anchor" href="#U">U</a><ul><li><a href="/collections/ugg">UGG</a></li></ul></li><li class="letter-collection V" id="VMobileNav"><a class="toc-anchor" href="#V">V</a><ul><li><a href="/collections/vivienne-westwood">Vivienne Westwood</a></li></ul></li><li class="letter-collection W" id="WMobileNav"><a class="toc-anchor" href="#W">W</a><ul><li><a href="/collections/we11done">We11done</a></li><li><a href="/collections/who-decides-war">Who Decides War</a></li></ul></li><li class="letter-collection X" id="XMobileNav"><a class="toc-anchor" href="#X">X</a><ul></ul></li><li class="letter-collection Y" id="YMobileNav"><a class="toc-anchor" href="#Y">Y</a><ul><li><a href="/collections/y-project">Y/Project</a></li><li><a href="/collections/yeezy-x-adidas">YEEZY X ADIDAS</a></li></ul></li><li class="letter-collection Z" id="ZMobileNav"><a class="toc-anchor" href="#Z">Z</a><ul></ul></li></ul></div><div class="toc-column" style="text-align: right;"><ul class="toc-links" style="position: sticky;top: 0;"><li id="#MobileNav"><a href="#">#</a></li><li id="AMobileNav"><a href="#AMobileNav">A</a></li><li id="BMobileNav"><a href="#BMobileNav">B</a></li><li id="CMobileNav"><a href="#CMobileNav">C</a></li><li id="DMobileNav"><a href="#DMobileNav">D</a></li><li id="EMobileNav"><a href="#EMobileNav">E</a></li><li id="FMobileNav"><a href="#FMobileNav">F</a></li><li id="GMobileNav"><a href="#GMobileNav">G</a></li><li id="HMobileNav"><a href="#HMobileNav">H</a></li><li id="IMobileNav"><a href="#IMobileNav">I</a></li><li id="JMobileNav"><a href="#JMobileNav">J</a></li><li id="KMobileNav"><a href="#KMobileNav">K</a></li><li id="LMobileNav"><a href="#LMobileNav">L</a></li><li id="MMobileNav"><a href="#MMobileNav">M</a></li><li id="NMobileNav"><a href="#NMobileNav">N</a></li><li id="OMobileNav"><a href="#OMobileNav">O</a></li><li id="PMobileNav"><a href="#PMobileNav">P</a></li><li id="QMobileNav"><a href="#QMobileNav">Q</a></li><li id="RMobileNav"><a href="#RMobileNav">R</a></li><li id="SMobileNav"><a href="#SMobileNav">S</a></li><li id="TMobileNav"><a href="#TMobileNav">T</a></li><li id="UMobileNav"><a href="#UMobileNav">U</a></li><li id="VMobileNav"><a href="#VMobileNav">V</a></li><li id="WMobileNav"><a href="#WMobileNav">W</a></li><li id="XMobileNav"><a href="#XMobileNav">X</a></li><li id="YMobileNav"><a href="#YMobileNav">Y</a></li><li id="ZMobileNav"><a href="#ZMobileNav">Z</a></li></ul></div></div></div>