Removing Scroll from the columns property Overflow re-allow the links to work BUT now the 2 columns cannot be both 100vh and scrolled independently anymore.
Help greatly appreciated.
ps: @PixelGeek you might have the most context here since you answered something closely related.
Difficult to show you with your site because there is so many elements in the right columns, but to achieve such a layout, the ROW elements isn’t a good choice (sorry). Your links don’t work because of it.
Use the ROW elements to break down elements in columns, but for a full layout, use divs.
Use a first div for your columns and then a second one for the main content. Put your sections into the second one and you IDS on the sections. Put a section per “chapter” so your structure is well broken down. Finally, use ROW elements to present content on columns into the section into the right div.
And then your links to IDs will work. Also try not to put any weird character in the IDs names, just letters and no space. yeah, one word. From experience
Sorry that you probably have to redo the structure and drag one by one all the elements inside your main second column. try to break the content down in a better structure on the way. As many top section than menu entries, then titles and rows for content.
I’m going to duplicate that page and move each column into a div instead.
If that doesn’t work I will escalate to trying to put all the content into sections. That page started just as a dump of symbols and isn’t intended to be semantic nor referenced in anyway, but better take the good habit anyways I guess.
I just tried 1. and replaced the columns by divs (still 100vh, overflow scroll) and the links still don’t work.
updated dashboard link: Webflow - PΛTH (page title: Home using divs)
Again, setting Overflow to Visible instead of Scrollbreak the independent scrolling of the two divs, but now the links are working (so the issue is not with the ID names for sure). Just like when I was using the columns.
Looks like columns might not the problem here.
I’m not sure trying 2. will yield any difference given the above.
Yes. I made a styleguide a while ago that works exactly like yours. I used a menu element for the… menu part. Dead simple, a fixed vertical menu 100% height of 200px wdth, and sections with a 200px margin. Not even a container for the sections. Basically the page is seen by HTML as a normal vertical page.
Tell me if you get the structure and if that helps. It’s so simple that I think it’s unnecessary that I transfer the site to you.
Don’t forget to give the following properties to your menu so that the called IDs will scroll to the top of the screen instead of stopping before entering the screen.
Okay, I got to the bottom of this. The links are now working, but there’s a scrolling glitch. You can scroll the two column independently, but upon reaching the bottom of the left column, you start scrolling whatever content is on the right.
The glitch in action:
@vincent I noticed that in your styleguide, the left menu was fixed but not scrollable, which means on small laptop, I can’t see links at the bottom of the menu (forms, animation, banner)
Links problem:
The real problem seems not due to having all the sections inside a container, nor using a menu. In fact I’m using a main content container that houses a lot of divs some of which have IDs, and the links work perfectly fine.
What does not work however is having both the links work and no scroll glitch.
If you remove the glitch by setting your most parent container to 100vh, overflow:scrollable, then the links stops working. If you remove 100vh and scrollable, now the links work but you have the glitch.
I’ve dug a lot but can’t find any solution that marry the links working and no glitch.
@vincent the links are now working at least, which was definitely the primary bug. Thanks again for the help.
If anyone finds a fix to the scroll glitch, please @me or reference this thread, that way we can close the loop (if closable the loop is…)
