Page 1 of 1
Fixed header not fixed on mobile view
Posted: Thu Jul 16, 2020 8:50 pm
by thisazlife
I have a website
http://ts4mo.com that has a fixed header. When I view it on my PC the fixed header stays at the top of the page but when I view it on my mobile phone the header floats with other content out of view as I scroll down through the website. TIA
Re: Fixed header not fixed on mobile view
Posted: Thu Jul 16, 2020 9:38 pm
by crispy68
One thing I noticed is why are you using 'affix' for the responsive menu when you have the menu inside a fixed layout grid? If the layout grid is fixed to the top, there is no need for the menu to use affix since it is inside the grid. Maybe these 2 are conflicting each other? It also looks like you have some objects or something not right as there is a horizontal scrollbar and I can swipe it horizontally.
If need be, please provide a demo project file (.wbs) so we can look at it.
Re: Fixed header not fixed on mobile view
Posted: Thu Jul 16, 2020 10:42 pm
by thisazlife
I don't know how to provide a demo project, do I email it somewhere?
Re: Fixed header not fixed on mobile view
Posted: Thu Jul 16, 2020 11:38 pm
by crispy68
1. create a folder. Call it demo (or whatever you want)
2. save your project in this folder.
3. Open this folder and confirm you see (1) project file (.wbs) and (2) images folder which has the images for your project
4. zip this folder
5. upload it to your server (or some other file sharing site) and provide the link to it (ex:
www.mysite.com/demo.zip)
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 2:58 am
by thisazlife
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 6:33 am
by Pablo
For me, the sticky header works on my iPhone.
Maybe your mobile browser does not support 'sticky'?
This is a relatively new HTML feature, so not all browsers do support this:
https://caniuse.com/#feat=css-sticky
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 7:03 pm
by thisazlife
Thank you. I've added another zip file for review. This wbs does not contain sticky and I'm having the same issue; the header is fixed on PC but not on mobile. Also another user "Crispy68" pointed out that there is a horizontal scroll bar on mobile, where does that come from? TIA!
ts4mo.no.sticky.zip
https://1drv.ms/u/s!Ai_oka6yXs-TtwWaPx8 ... 9?e=cumpef
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 8:21 pm
by Pablo
Did you read my comments?
Also another user "Crispy68" pointed out that there is a horizontal scroll bar on mobile,
This indicates that there are objects outside the viewport.
See the FAQ:
viewtopic.php?f=10&t=63817
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 9:36 pm
by thisazlife
I did read your comment. I'll review my site again but so far I'm not finding any differences between sites I have that do work and this one that doesn't.
Thanks for your help.
Re: Fixed header not fixed on mobile view
Posted: Fri Jul 17, 2020 10:28 pm
by alan_sh
You could try and click "render hidden objects" in the View menu and see if there's anything there.
Alan
Re: Fixed header not fixed on mobile view
Posted: Sat Jul 18, 2020 6:16 am
by Pablo
I was referring to:
For me, the sticky header works on my iPhone.
Maybe your mobile browser does not support 'sticky'?
This is a relatively new HTML feature, so not all browsers do support this:
https://caniuse.com/#feat=css-sticky
Re: Fixed header not fixed on mobile view
Posted: Wed Jul 22, 2020 3:54 am
by thisazlife
Thank you. I ended up just creating a new website and this time the sticky works and there isn't a horizontal scroll bar on mobile. I never could figure out what was wrong with the other site.
Re: Fixed header not fixed on mobile view
Posted: Wed Jul 22, 2020 2:20 pm
by zinc
Re: Fixed header not fixed on mobile view
Posted: Sun Oct 25, 2020 10:39 pm
by thisazlife
thisazlife wrote: Thu Jul 16, 2020 8:50 pm
I have a website
http://ts4mo.com that has a fixed header. When I view it on my PC the fixed header stays at the top of the page but when I view it on my mobile phone the header floats with other content out of view as I scroll down through the website. TIA
I was able to resolve this issue by reviewing Object Manager and removing any stray objects out of range.