Fixed header not fixed on mobile view

Questions related to the Responsive Web Design tools of WYSIWYG Web Builder.
Forum rules
PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/respon ... esign.html
Please read this first before posting any questions! Also check out the example project to get an idea how the RWD concept works.

Responsive Web Design FAQ:
http://wysiwygwebbuilder.com/forum/view ... 10&t=63817
Post Reply
thisazlife
 
 
Posts: 9
Joined: Mon Apr 24, 2017 4:19 am
Location: USA
Contact:

Fixed header not fixed on mobile view

Post by thisazlife » 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

User avatar
crispy68
 
 
Posts: 1052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Fixed header not fixed on mobile view

Post by crispy68 » Thu Jul 16, 2020 9:38 pm

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.

thisazlife
 
 
Posts: 9
Joined: Mon Apr 24, 2017 4:19 am
Location: USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife » Thu Jul 16, 2020 10:42 pm

I don't know how to provide a demo project, do I email it somewhere?

User avatar
crispy68
 
 
Posts: 1052
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Fixed header not fixed on mobile view

Post by crispy68 » Thu Jul 16, 2020 11:38 pm

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)


User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post by Pablo » Fri Jul 17, 2020 6:33 am

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

thisazlife
 
 
Posts: 9
Joined: Mon Apr 24, 2017 4:19 am
Location: USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife » Fri Jul 17, 2020 7:03 pm

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

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post by Pablo » Fri Jul 17, 2020 8:21 pm

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

thisazlife
 
 
Posts: 9
Joined: Mon Apr 24, 2017 4:19 am
Location: USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife » Fri Jul 17, 2020 9:36 pm

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.

alan_sh
 
 
Posts: 666
Joined: Tue Jan 01, 2019 5:50 pm

Re: Fixed header not fixed on mobile view

Post by alan_sh » Fri Jul 17, 2020 10:28 pm

You could try and click "render hidden objects" in the View menu and see if there's anything there.

Alan

User avatar
Pablo
 
Posts: 21525
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post by Pablo » Sat Jul 18, 2020 6:16 am

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

thisazlife
 
 
Posts: 9
Joined: Mon Apr 24, 2017 4:19 am
Location: USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife » Wed Jul 22, 2020 3:54 am

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.

User avatar
zinc
 
 
Posts: 1476
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom

Re: Fixed header not fixed on mobile view

Post by zinc » Wed Jul 22, 2020 2:20 pm

Good news everyone! COVID-19 is STILL here!

Post Reply