Sticky NavBar works on lapTop but not on iPhone.

programming web dev
1

I want the page to be responsive so I stopped using position: fixed. I like the flex ability move the browser page right to left (shrink)
and the spacing stays the same right to left.
Any thoughts?

HTML

CSS
body{
display: flex;
justify-content: center;
margin: 0;
}
#container{
width: 80%;
height: 500px;
margin: auto;
}
.nav{
display: flex;
justify-content: space-around;
border: 4px #0ff solid;
height: 40px;
min-width: 200px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
z-index: 5;
top: 0;
position: sticky;
}

Thank you for any advice.
Snow

2

Sorry
HTML

3

<div id=“container”>

<div class=“nav”>

<img src=“images/pics/x.jpg” width=“100%” alt=""/> </div>

</div>

4

Do you have a live example we can look at? That would help!

5

This is my index page mock-up.
http://davidsimonperry.com/ZZZ.html
The content below the navBar scrolls behind nicely on the lapTop, but on my iPhone.
On my existing index page
http://davidsimonperry.com/index.html
it works fine on all platforms, but it is not responsive using position: fixed.
You should take a look at my email sent page.
http://www.davidsimonperry.com/A-sent.html
You helped me with the red balls falling.
Thank you for that one.
WOW.
Snow

6

I guess it is a hard thing to do.

7

What you are trying to do is difficult, but I’m also having difficulty understanding your question.

On this page, what is it that I’m supposed to be focusing on. Is the content scrolling properly on your desktop but not working on the iPhone? In other words, do you want the same behavior you see on desktop on the iPhone with the appropriate adjustments to account for a smaller screen size?

On this page (http://davidsimonperry.com/index.html), when you are saying works fine on all platforms, does it mean it works on desktop and mobile as well? If so, if we can get the behavior to work when position: fixed is set, would that solve it for you?

8

I thank you for you time Mr. Kirupa.
http://davidsimonperry.com/Kirupa.html
This linked page I created shows all the example of what is going on.
I would like this page to be responsive.
Using display: flex is a more user friendly on small devices displaying a larger overall image than using position: fixed.
I would like to have the NavBar at the top of the page at all times.
The NavBar rolls out if I scroll down on the phone captured in example 8.
I does not stick at the top of the page.
If you have any thought it would be greatly appreciated.
Thank you again.
Snow

9

Thanks for the detailed explanation! I found out what the issue is. The sticky value needs to be prefixed with -webkit to work on iOS. When prefixed the value, the header was properly sticking to the top of the page as expected on both Safari desktop (where it also didn’t work) as well as on my iPhone.

The last line contains the change:

.nav {
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border: 4px #0ff solid; 
	height: 40px;
	box-shadow:  2px 4px 8px 2px rgba(0, 5, 10, 0.2),
				 0px 6px 20px 0px rgba(0, 0, 0, 0.19);
	min-width: 200px;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	z-index: 5;
	top: 0;
	position: sticky;
    position: -webkit-sticky;	
}

Let me know if this works :slight_smile:

10

Indeed it worked.
I do not Know much about the webkit business,
but I will have to study up on it.
I recall some bits used for Mozilla as well.
I reallyDo appreciate your time and efforts.
Right again you were.
Thank you.
Snow

11

Glad it worked :slight_smile:

One of the first places I often look when things work on the desktop (and in Chrome) but not on mobile is this site: https://caniuse.com/#feat=css-sticky It does a great job highlighting the various degrees of support other implementations have, and it also calls out when you may need to prefix something!

1 Like