Sticky header and block below it
Hey, redoing the website nav as we talked about in another thread. Used @Initiostar's format..cause I loved it.
It looks great on the two variants as I test it on the computer, large size monitor to making it smaller to portray a phone and tablet.
The problem is on a phone or tablet (in real time) does not align together by a smidge. Can I fix that by doing something?
Thanks much..as always indebted to your knowledge and expertise!
https://www.beverlyee.com
Sue
1 Attachment(s)
Re: Sticky header and block below it
Hi Sue,
Reduce the font size for Beverlyee on the mobile sticky header bar to 60px, so it does not overlap the non-sticky menu block that slides underneath it.
Attachment 131349
Gary
Re: Sticky header and block below it
@Initiostar, the alignment (the smidge) is from left to right. The top to bottom is wonderful and not an eye issue for me.
1 Attachment(s)
Re: Sticky header and block below it
OK I see it on my mobile - make the non-sticky menu background rectangle, stretchy and full width - this (hopefully) should fix it.
I still see the issue I described above on my mobile though - the "y" in Beverlyee overlaps the sliding menu bar - it could be smaller so that it sits within the sticky top bar.
Attachment 131350
Gary
Re: Sticky header and block below it
@initiostar, tried the stretchy and full width and still looks the same to me on my mobile device..tried a refresh too and seems the same. :(
I see what you are saying about the "y" I know how to fix that one but kind of like it the size it is..lol
Sue
1 Attachment(s)
Re: Sticky header and block below it
Sue, it seems to be working OK on my mobile now; the very thin white vertical line to the right of the non-sticky menu bar is no longer there.
Attachment 131353 - cleared mobile history too.
Maybe have someone else can check too: https://beverlyee.com/
Gary
1 Attachment(s)
Re: Sticky header and block below it
Attachment 131354Gary, this is so interesting. I have an Iphone and cleared cache, tried 3 browsers. Here's my screenshot.
Re: Sticky header and block below it
Not seen this issue before on iOS - but here is a simple sticky/non-sticky test: https://initiostar.co.uk/demo/testWidth/
Works on Android; don't have an iOS to hand atm.
Re: Sticky header and block below it
Hi @Sueb. Finally see what your talking about here, on portrait and landscape.
Depending upon how much you want to change, and what soft groups you have on that rectangle. I’d take all soft groups off, and make sure that rectangle is place on a layer all its on. Then apply stretch.
Or .. delete that rectangle completely along with the layer, then try a new layer. Draw the rectangle, move layer to back, apply stretch and your other elements.
Or .. copy the large rectangle in your links section, resize, and place on another layer for the offending rectangle.
I have a feeling that rectangle is taking some properties from another rectangle in the variant, because you have the rectangle in other areas not stretched, and others that are. In your links section that large rectangle is stretched, and it works. I did have this problem sometime ago. After I isolated that rectangle I cleared it up.
Once you have the rectangle stretched, you can soft group with your other elements.
I’m viewing on iOS phone.
-Bill
Re: Sticky header and block below it
Quote:
Originally Posted by
Initiostar
Looked at your test on the Iphone and it was fine! So what do you think I should do?
Sue