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: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Fixed header not fixed on mobile view

Post 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
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Fixed header not fixed on mobile view

Post 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.
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife »

I don't know how to provide a demo project, do I email it somewhere?
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Fixed header not fixed on mobile view

Post 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)
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post by thisazlife »

Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post 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
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post 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
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post 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
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post 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.
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
alan_sh
 
 
Posts: 1681
Joined: Tue Jan 01, 2019 5:50 pm

Re: Fixed header not fixed on mobile view

Post by alan_sh »

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

Alan
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Fixed header not fixed on mobile view

Post 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
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post 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.
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
User avatar
zinc
 
 
Posts: 2146
Joined: Sat Dec 08, 2007 3:06 pm
Location: London, United Kingdom
Contact:

Re: Fixed header not fixed on mobile view

Post by zinc »

Running WYSIWYG Web Builder since 2007...
thisazlife
 
 
Posts: 72
Joined: Mon Apr 24, 2017 4:19 am
Location: Chandler, AZ USA
Contact:

Re: Fixed header not fixed on mobile view

Post 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.
Steve Colbeth
Arizona Real Estate Agent / Consultant
http://stevecolbeth.com
me@stevecolbeth.com
Chandler, Arizona - USA
Post Reply