Printable View
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
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
@Initiostar, the alignment (the smidge) is from left to right. The top to bottom is wonderful and not an eye issue for me.
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
@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
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
Attachment 131354Gary, this is so interesting. I have an Iphone and cleared cache, tried 3 browsers. Here's my screenshot.
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.
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
Looked at your test on the Iphone and it was fine! So what do you think I should do?Quote:
Originally Posted by Initiostar
Sue
Thanks Bill. I added the "stretch" to make it work right, but on the Android it does but not on the Iphone. Agree it has something to do with that rectangle layer....and I didn't make this but used what Gary had made. And I looked and there are no soft groups, that I could tell.Quote:
Originally Posted by bwood
The two rectangles are on the same layer, top one no stretch and beneath that we added the stretch.
Interesting that you had the same problem and fixed it. Will give it a try. Waiting to hear from Gary as he made the two rectangles for me without anything on them and they look fine on the Iphone, so my guess is that you are right..something there that is causing the crazy Iphone to glitch...
OK - the top sticky rectangle can be set to 'Sticky' don't stretch - does that fix the problem.Quote:
Originally Posted by SueB
BTW Bill, you jogged my memory here.
@initiostar, already somehow set to sticky, and stretch..maybe take off the stretch?Quote:
Originally Posted by Initiostar
Yes, remove 'stretch' from the top bar, but keep it 'sticky'
Okay, I think that is better but NOW when I click on "about" or "contact" "volunteering," the header with Beverlyee gets close to the rectangle with the subject title in it but not right up to it like before.
What now to do?
Sue
Sue, you can make any adjustments you want to the font size of your text 'Beverlyee' or to the height of the top sticky rectangle; if you do the latter just move ALL the content down the page (the menu anchors will move down the page with your content).Quote:
Originally Posted by SueB
Attachment 131355
Just keep the text Beverlyee contained in the sticky top rectangle.
Gary
@initostar, I don’t think I explained what I was saying correctly. I’m going to try to attach a screenshot.Attachment 131356Quote:
Originally Posted by Initiostar
Sue, surely all you need is to deepen the backdrop to ensure the y is covered?
Acorn
Tried that, nope, helped a little maybe but still didn't meet up to the subject section like it had previously.Quote:
Originally Posted by Acorn
This is the image on my Android from your live site: The sticky text Beverlyee AFAICT is still hanging below its sticky rectangle container - this is not an issue for Android other than it looks odd.
Attachment 131357
The problem is again AFAICT with iOS and likely the anchor link scrolls up until its hits the sticky object, which is in fact the bottom of the "y". You also have an photo in your screenshot that looks to impinge on the anchor bar, maybe not an issue but give the anchor a bit more space top and bottom.
I tried to explain this, but here is your screenshot with the issue:
Attachment 131358
Appreciate we solved one issue and hit another, but we have to eliminate the hanging 'y' - we are then doing exactly what you saw here https://initiostar.co.uk/demo/testWidth/ where you said it worked OK?
Gary
Quote:
Originally Posted by Initiostar
@Initiostar, that worked! I shrank the font, still goes weird on the below headings but I can adjust that I think.
What I did notice, when I do a refresh on my Apple phone, that instead of landing on the upper part of the home page, it drops down to the "contact" part down below...any clue why? I've never seen that happen with any other website when I've done a refresh...sigh
Good to see you have resolved the issue Sue,
Attachment 131360
Can't really comment on what happened with your iPhone, but it works are expected on my Android. Any tidying up should be cosmetic now :D
Gary
Thank you so much, Gary, for sticking with me to test and work on the things that I felt needing a tweak!!Quote:
Originally Posted by Initiostar
sue
@sueb. I might be able to answer that Sue. Check the properties of the page (on open) since your going to an opening page, it’s auto sliding down to contact. Also check your menu button for (contact). Something is triggering the opening page to move to contact.Quote:
Originally Posted by SueB
Since this is @initostar design I’ll bow out for now. ~Bill
Quote:
Originally Posted by bwood
Hi Bill. I'm not sure what you are asking me to look at and really do appreciate the assistance. These are anchors leading to the part of the page and not per se links. I've never used anchors. What I see is that the last section that I go to, when I refresh, whether on the phone or computer, goes to that last section I was on.
If you have a better way to do this and fix this, I would love to know how...it's not a bad thing, just an annoying thing to my brain!
@Initiostar, any suggestions? You seem to understand anchors better than I do...
Sue
Sue, if you have an address with an anchor (url#anchor), to which you have go to with clicking a link, then a refresh is telling the browser to go to the address and then nip along to the anchor.Quote:
Originally Posted by SueB
The delay in doing this is to not make the experience jarring to the viewer, particularly on a mobile where there is little space to work out where you are.
An anchor is just a move to a location on a page.
If you have a scrolling website, the whole thing is one long page and an anchor can be a long way away.
Acorn
@Acorn, on this site it’s one long page. So I assume, the refresh acts the same as url#anchor? And the refresh does the same whether mobile or computer. I always thought a refresh was similar to clearing the cache!! 🙃Quote:
Originally Posted by Acorn
Sue, this is a visual demonstration of Acorn's statement using your own website (mobile version) - using the menu go to the about section (which is one of the anchors on your single page website); then scroll back upwards until you see the menu; you will see 'About' is in black text; you will also see in the address bar the About anchor address.
Attachment 131361
Now, refresh the browser and it will return to the About anchor, in the same way as if you had pressed the About link - just to prove this is no fluke, do the same for Contact and Volunteering.
Apart from centre-aligning a couple of your headings (Contact Us being one) it looks OK to me. I'd give yourself break :D
Gary
@Initiostar, everything you said is true except the black part for me...lol Thanks for your patience, understanding and putting up with my quirky questions and trying to understand something new...and I love your last comment...I know sometimes I strive to have things as perfect as I can...and sometimes purely ridiculous! :)Quote:
Originally Posted by Initiostar
It's no exaggeration to say that @Initiostar's format methods can make my work look more professional. This makes us more inspired in our work!