NavBar will not Stick on iPhone but works on deskTop.


#1

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 –/


#2

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