Welcome to TalkGraphics.com
Page 1 of 3 123 LastLast
Results 1 to 10 of 30
  1. #1

    Default 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

  2. #2
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    810

    Default 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.

    Click image for larger version. 

Name:	Beverlyee.jpg 
Views:	16 
Size:	156.2 KB 
ID:	131349

    Gary

  3. #3

    Default 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.

  4. #4
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    810

    Default 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.

    Click image for larger version. 

Name:	Beverlyee.jpg 
Views:	15 
Size:	105.7 KB 
ID:	131350

    Gary

  5. #5

    Default 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

  6. #6
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    810

    Default 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.

    Click image for larger version. 

Name:	Screenshot_20220111-092114.jpg 
Views:	7 
Size:	117.2 KB 
ID:	131353 - cleared mobile history too.

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

    Gary

  7. #7

    Default Re: Sticky header and block below it

    Click image for larger version. 

Name:	screenshot mom's phone.jpg 
Views:	18 
Size:	122.0 KB 
ID:	131354Gary, this is so interesting. I have an Iphone and cleared cache, tried 3 browsers. Here's my screenshot.

  8. #8
    Join Date
    Apr 2018
    Location
    Barnes, London
    Posts
    810

    Default 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.

  9. #9
    Join Date
    Dec 2006
    Location
    Melfort, Saskatchewan Canada
    Posts
    666

    Default 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. Id 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.
    Im viewing on iOS phone.
    -Bill
    Bill Wood
    Expresiv Designs.
    Charity Web Design
    XARA Pro+. WD17, Designer 17. Premium packages.

  10. #10

    Default Re: Sticky header and block below it

    Quote Originally Posted by Initiostar View Post
    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

 

 

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •