Sticky header and block below it

[SueB]

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

[Initiostar]

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.



Gary

[SueB]

@Initiostar, the alignment (the smidge) is from left to right. The top to bottom is wonderful and not an eye issue for me.

[Initiostar]

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.



Gary

[SueB]

@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

[Initiostar]

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.

- cleared mobile history too.

Maybe have someone else can check too: https://beverlyee.com/

Gary

[SueB]

Gary, this is so interesting. I have an Iphone and cleared cache, tried 3 browsers. Here's my screenshot.

[Initiostar]

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.

[bwood]

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

[SueB]

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.

Looked at your test on the Iphone and it was fine! So what do you think I should do?
Sue