Sticky Headers on Mobile Devices

I have a website with a sticky header with navigation links that scrolls to the proper location on the page.

This setup works great until I get to the mobile device. The sticky header takes up the entire screen and I would prefer to have the mobile page just be one long static page.

How do I create a separate mobile page without messing up the sticky headers and scrolling on the other devices?



Play “hide and seek” with it:

In ‍some ‍circumstance ‍you ‍might ‍want ‍to ‍hide ‍an ‍element ‍on ‍smaller ‍devices, ‍or ‍use ‍an ‍element ‍with ‍different ‍properties.

‍That ‍can ‍happen ‍either ‍because ‍an ‍element ‍isn’t ‍appropriate ‍for ‍mobile, ‍or ‍because ‍you ‍need ‍an ‍element ‍with ‍different ‍properties ‍on ‍a ‍different ‍device.

‍For ‍this ‍you ‍can ‍use ‍the ‍“show ‍on ‍this ‍device” ‍checkbox ‍to ‍selectively ‍show/hide ‍elements.

See the documentation → devices

Mr. F.

1 Like