Update — This post has a Part 2 that you can read here: Most frequent solutions — Part 2
Instead, it scrolls up to the top of the viewport. Or, when the Navbar is vertical, the scroll stops when the anchor is still outside of the screen.
Webflow offers a lot of controls for this interaction. Especially, there's an offset to the scroll by default so the smooth scroll to an anchor will always nicely stop at the bottom of the Navbar.
Here are the reasons why it may not work.
in your page (Prefer using the Navbar widget when it's possible, so you have access to the following convenient options.
Select your Navbar and check the parameters in the Settings tab. Sometimes you won't want to have an offset to the scroll, so you can deactivate it.
In order for this feature to work, the header must have position: fixed and has to meet at least one of the following criteria:
The other option: "Menu fills page height" is usefull when the Navbar is vertical and on a side of the screen. Checking this option will allow smooth scroll up to the top of the viewport. If unchecked, the targeted anchor stops just before entering the screen, out of the viewport, and the visitor have the feeling the target is missed.
When clicking thetrigger element, the targeted DIV shrinks and disappears like expected. However, its content stays in place and remains visible.
Applying Opacity:0% or Display:none at the end of the interaction dosn't fix the issue: the content stays visible until the end of the interaction and then disappear abruptly.
To fix this, sSelect the shrinking DIV and set it to overflow:hidden. Now the content will disappear along the folding animation of the DIV.
It's still challenging to completely hide a DIV with an interaction, even when zeroing its dimensions.
The margins and padding are not taken into account in the dimensions of an element. So what you see remaining from the shrinking DIV is the sum of its top and bottom margins and padding. If you need margins and padding in this DIV for your design, simply nest the entire DIV into another DIV, and set your interaction to target this new container instead.
As a general advice, never give design properties to the outer elements such as Containers, Sections, Columns etc.. Prefer nesting a DIV inside and start working with it. It will also be usefull, at times, to copy the whole content of the outer element to move it someplace else.
The hovers go crazy, the animation happens before it's clicked, did everything turned Voodoo?
Maybe the interaction has been wrongly assigned to several elements, especially parent and child elements, or siblings. It's very easy to find oneself in this situation.
Back from testing an interaction, it's common to forget to select the right element before going to edit the interaction again. By doing so, the element currently selected get the interaction too. And so it begins...
To fix this, select all the elements in your hierarchy to see if they're not assigned an interaction that's not theirs. It can be very difficult to find the object with the interaction in. Use the Navigator tab to review all elements in the tree view one by one, that's the only way to be sure to check them all.
The width of the page is way wider than the width of the screen. There is a horizontal scroll.
There is either an element that has a fixed width defined, that is wider than the screen size. Review all your elements to find it and set it to something like width:100%.
The other possibility is that one element has been told to perform an interaction onScroll, and the element is waiting outside of the viewport to scroll in. The element is invisible but exists in the HTML so the browser accounts for its position and affectes the width of the full page.
To take that into account, select the section container of this element and set it to overflow:hidden. It means that everything outside of the section boundaries will not be shown or taken into account in the rendering of the page.
It works in the designer, not when published. To fix this, set them to display:inline instead of display:inline-box.
You keep changing it and refresh the site after publishing, but the title never change.
Maybe the Page Title, in the page panel, has been updated. The Page Title is for Webflow purposes only. To change the HTML page title, change the SEO Title instead.
And now even when something is changed in the content of the page, the changes don't propagate when the site is pubished.
Maybe the URL has been changed too, and then published, but the old page that you’re trying to refresh still exists as long as you don’t unpublish and republish the site, so you’re possibly trying to refresh the wrong page.
It's like the page stopped rendering... A few sections and the footer are simply not there.
Maybe there's an <iframe> with custom code somewhere in the design, just before where the page breaks. And in the code, the <iframe> tag isn't closed.
Add </iframe> at the end of the custom code and republish the site.
And the Number One most common designers' issue on Webflow is...
Mouse, trackpad, arrows... the site is stuck at the top, even if you have 10 sections full of content below.
Remove that overflow:hidden on the <body> element ;-)
You liked this post? Read more solutions here: Most frequent solutions — Part 2