How can I fix the issue of the URL and navbar showing up and affecting the height of my Webflow site when scrolling on Chrome iOS?

Published on
September 22, 2023

To fix the issue of the URL and navbar showing up and affecting the height of your Webflow site when scrolling on Chrome iOS, you can follow these steps:

  1. Open your Webflow project in the Designer and navigate to the affected page.
  2. Select the first section or element on your page (usually the hero section) and give it a unique class name or ID. This will be used for customizing the interactions later.
  3. In the Navigator panel, make sure the element you selected is at the top of the hierarchy. If it's not, use the "Move Up" button to bring it to the top.
  4. With the element still selected, go to the Settings tab on the right sidebar and click the "Position" dropdown menu.
  5. Choose "Fixed" from the menu. This will make the element stay in the same position on the page regardless of scrolling.
  6. Now, you need to adjust the height of the element so that it covers the entire viewport. Click the "Size" dropdown menu in the Settings tab and choose "100VH". This sets the height of the element to 100% of the viewport height.
  7. Next, you'll need to add a "Margin" to the bottom of the element. This will prevent content from being hidden underneath the fixed element. Click the "+" icon in the "Margin" section of the Style tab, and enter a value of at least 1. This will ensure that there is some space between the fixed element and the rest of the content.
  8. Now it's time to create an interaction that triggers when scrolling starts. Scroll down to the Interactions panel on the right sidebar.
  9. Click the "+" button to create a new interaction. Give it a name that corresponds to its purpose, such as "Hide URL and Navbar".
  10. In the Triggers section, select "While scrolling in view". This means that the interaction will start when the fixed element is in the viewport.
  11. In the Affects section, click the "+" button and choose the "Navbar" and "URL" checkboxes. This ensures that both the navbar and the URL bar will be affected by the interaction.
  12. For the "Opacity" value, enter 0. This will make the navbar and URL bar transparent, effectively hiding them when scrolling.
  13. Lastly, you can add a transition by clicking on the "+ Add" button under the "Transitions" section. Choose a desired transition effect, such as fade, and adjust the duration and easing as desired.
  14. Save and publish your site, then test it on Chrome iOS to see if the issue is resolved. The URL and navbar should now be hidden when scrolling on your Webflow site.

Additional Questions:

  1. How do I fix the issue of the URL and navbar affecting the height of my Webflow site in Chrome iOS?
  2. Can I make the URL and navbar disappear when scrolling on Chrome iOS in Webflow?
  3. How do I create a fixed element that covers the entire viewport in Webflow?