We've all been there...

Top 10 most frequent solutions

By Vincent Bidaux, published on

August 11, 2020

This post has been featured on the

Every Webflow designer run into each of those issues once. Or more. Here is the grand TOP 10 of Webflow designers' most frequent brain cramps!

Fix

Update — This post has a Part 2 that you can read here: Most frequent solutions — Part 2

10. The smooth scroll to an anchor link doesn't stop at the bottom of the navbar

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.

instead of using the Webflow Navbar widget, the menu is made of a custom navbar and it doesn't have the Header HTML5 tag set in the Settings panel
the Navbar is placed deep inside the site structure instead of being just under the <body> element
the Navbar is position:fixed and the checkbox "Disable scroll offset when fixed" is checked
the ID names are put on elements that aren't at the top level under the <body> but deep down the hierarchy
you're using several Webflow Navbar elements in your page (for example one for desktop and one for mobile)

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:

A standard Navbar component directly inside the body
An element with a class named header or Header directly inside the body
An element that has the <header> HTML5 tag (specified on the Settings tab)

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.

9. The fold/unfold interaction works, but the content of the DIV remains visible

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.

8. The DIV won't shrink completely when set to height:0px

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.

7. An Interaction was working very well and suddenly it does very weird things!

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.

6. On Mobile or Tablet, the whole layout shifts to the left

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.

5. Four elements at 25% width don't fit side by side once the site is published.

It works in the designer, not when published. To fix this, set them to display:inline instead of display:inline-box.

4. The new page title isn't published!

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.

3. Now the SEO title is updated, the title of the page still doesn't change!

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.

2. The published page stops abruptly somewhere down the middle

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.