# NavBar will not Stick on iPhone but works on deskTop.

**URL:** https://forum.kirupa.com/t/navbar-will-not-stick-on-iphone-but-works-on-desktop/639530
**Category:** web dev
**Created:** [March 21, 2019, 3:02pm UTC](https://forum.kirupa.com/t/navbar-will-not-stick-on-iphone-but-works-on-desktop/639530 "2019-03-21T15:02:15Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![snowmandsp](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/snowmandsp/32/9548_2.png) [@snowmandsp](https://forum.kirupa.com/u/snowmandsp)
#### Post date: [March 21, 2019, 3:02pm UTC](https://forum.kirupa.com/t/navbar-will-not-stick-on-iphone-but-works-on-desktop/639530/1 "2019-03-21T15:02:15Z")

</div>

I can not get my navbar to stick at the Top of the page on the iPhone.

It sticks on the laptop.

I want the page to be responsive so I stop using position: fixed. This is the code with out all the meat.

Any thoughts?

\<\<\< HTML \>\>\>

\<!doctype html\>

\<html\>

\<head\>

\<meta charset=“UTF-8” name=“viewport” content=“width=device-width, initial-scale=1.0”\>

\<link href=“css/x.css” rel=“stylesheet” type=“text/css” media=“screen and (min-width: 0px)”/\>

\<link rel=“icon” type=“jpg” href=“images/pics/x.png” size=“120x120”/\>

\<title\>x\</title\>

\</head\>

\<body\>

\<div id=“container”\>

\<!-- Nav --\>

\<div class=“nav”\>

\<div class=“flame”\>

\<a href=“x”.html\>x\</a\>

\</div\>

\<div class=“house”\>

\<div class=“content”\>

\<a href=“x.html"\>x\</a\>

\</div\>

\</div\>

\<div class=“post”\>

\<a href=“x.html"\>x\</a\>

\</div\>

\</div\>

\<!-- Bar --\>

\<div class=“bar”\>

\<div class=“a”\>

\<a href=“x”.html\>x\</a\>

\</div\>

\</div\>

\<!— Picture —\>

\<div id=“middle”\>

\<div class=“picture”\>

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

\</div\>

\</div\>

\</div\> \<!–End Container All–\>

\</body\>

\</html\>

\<\<\< CSS \>\>\>

- {padding: 0px; margin: 0px; text-decoration: none; color: #645086;}

a:link {color: #645086;}

a:hover {color: #FF0000;}

img:hover {border: none;}

body{

display: flex;

justify-content: center;

background-color: #fff;

margin: 0;

}

#container{

border: none;

width: 80%;

height: 1000px;

margin: auto;

}

/_– Nav –_/

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

}

.flame{

display: flex;

justify-content: center;

padding: 4px 0px 0px 0px;

flex: 1;

order: 1;

}

.flame img{

height: 30px;

}

.house{

display: flex;

justify-content: center;

padding: 7px 0px 0px 0px;

flex: 1;

order: 2;

}

.house img{

width: 29px;

}

.post{

display: flex;

justify-content: center;

padding: 6px 0px 0px 0px;

flex: 1;

order: 3;

}

.post img{

width: 22px;

}

/_– Bar –_/

.bar{

display: flex;

background-color: #fff;

align-items: center;

justify-content: space-evenly;

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: 300px;

z-index: 4;

top: 0;

position: sticky;

}

#house{

padding: 4px 0px 0px 0px;

margin: 0px 0px 0px 0px;

}

/_– Middle –_/

#middle{

padding: 0px 0px 0px 0px;

margin: 20px 0px 0px 0px;

}

.picture{

max-width: 400px;

height: auto;

box-shadow: 2px 4px 18px 2px rgba(0, 5, 10, 0.5),

0px 6px 20px 0px rgba(0, 0, 0, 0.2);

padding: 0px 0px 0px 0px;

marginxxx: 100px 0px 0px 0px;

margin: auto;

}

.picture img{

display: flex;

justify-content: center;

}

/\* Small devices \*/

@media only screen and (max-width: 600px) {

.bar {display: none;}

}

/\* Big devices \*/

@media only screen and (min-width: 600px) {

.nav {display: none;}

}

/_– End CSS –_/

---

<div class="post-metadata">

### Author: ![snowmandsp](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/snowmandsp/32/9548_2.png) [@snowmandsp](https://forum.kirupa.com/u/snowmandsp)
#### Post date: [March 21, 2019, 3:06pm UTC](https://forum.kirupa.com/t/navbar-will-not-stick-on-iphone-but-works-on-desktop/639530/2 "2019-03-21T15:06:02Z")

</div>

Sorry about the poor spacing.  
It is my first time posting.
