Various: ID-Links, Hiding Elements, iPhoneX, Scrolling, Navbar Best Practices

[jerdesign]

Hi everybody,

so I’ve been exploring Webflow and the awesome tutorials for hours
I still have a few questions and issues I can’t figure out though.
Would be super grateful if you folks could share some best practices and tips

Questions & Issues

1. The scroll-to-ID-links currently also trigger the page-trigger which results in an offset between the ID-link and navbar. Ideally the distance between the bottom of the navbar an ID should always be the same no matter the height of the navbar.
   Example: while on top of the page, click one of the last submenu-items like References — page will scroll down + primary menu will hide = distance too high. This is especially annoying on mobile.

2. Changing orientations on mobile breaks the layout a bit. Any tips on how to better structure the content in order to avoid that? Does it have to do with the interactions?

3. After opening the menu on mobile — is it possible to prevent the user to keep scrolling the page in the background?

4. Hide specific element on page: for the mobile version I assigned different classes to the 2 page titles in the bottom bar (summary, works) to hide the inactive page using a page-load interaction. There must be a better way, right‽ Maybe even reusing my primary navbar?

5. Navigation: my navigation is quite entangled, no idea where to even start. Do you maybe have an idea how to simply or clarify it?

6. iPhone X: haven’t been able to find a tutorial on how to adapt the design to the new iPhone screens without code. In my case the bottom navbar could use some padding on the bottom. Any news regarding this topic?

Note:
I want to host the website somewhere else and therefore I am currently not planning to use the CMS feature. Ideally the fixes are without code.

Can’t wait for some clarifications
Best from Berlin,
Tito

---

Here is my public share link: https://preview.webflow.com/preview/jerdesign?utm_source=jerdesign&preview=bc9164652c9de6f7b4e0871ac8737d2e

[vincent]

Hi Tito and welcome on this forum!

The scroll-to-ID-links currently also trigger the page-trigger which results in an offset between the ID-link and navbar. Ideally the distance between the bottom of the navbar an ID should always be the same no matter the height of the navbar.
Example: while on top of the page, click one of the last submenu-items like References — page will scroll down + primary menu will hide = distance too high. This is especially annoying on mobile.

To cope with a fixed navbar and a scroll toID, you have to explore those Navbar element options:

Changing orientations on mobile breaks the layout a bit. Any tips on how to better structure the content in order to avoid that? Does it have to do with the interactions?

Can you make a screencast to show what happens, or a series of commented screenshot? Don’t forget to mention on what page it happens.

After opening the menu on mobile — is it possible to prevent the user to keep scrolling the page in the background?

There are CSS and JS solutions for that. It usually is recommended for modals. I never tried to apply that to a nav menu. Here is a demo I made using only CSS http://scrollable-overlay.webflow.io/

Hide specific element on page: for the mobile version I assigned different classes to the 2 page titles in the bottom bar (summary, works) to hide the inactive page using a page-load interaction. There must be a better way, right‽ Maybe even reusing my primary navbar?

I’m not sure what youre after. Simple select any element and define it’s visibility using Display, for each device. One element can be display block for desktop and none for all mobile devices, and another would have the opposite settings. So you can have a different navbar or whatever for desktop and devices.

I have no answers to 5 and 6. Refrain from grouinf questions, in order to have a better chance to be answered. It’s ok to open several topics.

[jerdesign]

Update:

I have to admit, by forcing me to fix these various smaller problems by simplifying the design instead of using code, the design and feel of my website got better. Here some comments regarding my issues I had before.

1. Seems like there is now way around it or at least there is no easy fix. I would suggest to adapt the design accordingly. FYI: give the navigation bar div the tag Header so the browser understands how much offset to apply. The Disable scroll offset when fixed never seemed to do anything for me.

2. My old design had too many dependencies. Hide/show elements on scroll, display: none on mobile etc. Again, simplifying my design was an easier fix for me. Basically, if you make something disappear with an interaction and you resize the browser window you have to make it visible again with an interaction. Just setting it visible won’t work.

3. http://scrollable-overlay.webflow.io/ Worked for me but broke some other important things like id links in the navbar so I adapted the design again.

4. No idea what I did there or what I was trying to accomplish anymore.

5. Simplify design. I currently always try to integrate some time to clean, name and simplify my classes and elements.

6. In the forum many link to articles from Apple and alike but I haven’t been able how to integrate the code into Webflow. Still annoyed that backgrounds are not respected in newer iPhones.

Hope that helps

[vincent]

I have to admit, by forcing me to fix these various smaller problems by simplifying the design instead of using code, the design and feel of my website got better.

Amen! Solutions are often “design solutions”. Yet, Webflow is very capable so your rarely have to resot to “desing for the tool” (which means design with limitations in mind, which is a very popular saying in the Drupal / Joomla world and the best excuse for developers in that world. Entirely infuriating.)

I personaly don’t even know of a solution for 6/