CODEWITHSUNDEEP
javascripthtmlcsssticky
Bigbigga
Bigbigga

Reputation: 37

Header not sticking to the top of the screen

I am working on this website for mobile: hannelorefischer.com

However, the header isn't sticking to the top of the screen. Here's my code:

<div class="show" style="position: -webkit-sticky; position: sticky;  top: 0; display:none; margin-top: 250px; text-align: center; font: Italic 18px/29px 'pensumpro-book'; letter-spacing: 0px; color: #000000; opacity: 1;"><a href="#aktuelles">Aktuelles</a>&nbsp; &nbsp; &nbsp; <a href="#buecher">Bücher</a>&nbsp; &nbsp; &nbsp; <a href="#texte">Texte</a>&nbsp; &nbsp; &nbsp; <a href="#biographie">Biographie</a></div>

I might be wrong here, but I believe it stops working when the container div is closed.

Also, I'm summoning the header section with a .load() jquery.

Any ideas?

Upvotes: 0

Views: 60

Answers (3)

Tamara N
Tamara N

Reputation: 73

trying adding this property:

z-index: 2;

Upvotes: 0

Xenonwellz
Xenonwellz

Reputation: 15

Use this instead <div class="show" style="position: fixed; top: 0; display:none; margin-top: 250px; text-align: center; font: Italic 18px/29px 'pensumpro-book'; letter-spacing: 0px; color: #000000; opacity: 1;"><a href="#aktuelles">Aktuelles</a>&nbsp; &nbsp; &nbsp; <a href="#buecher">Bücher</a>&nbsp; &nbsp; &nbsp; <a href="#texte">Texte</a>&nbsp; &nbsp; &nbsp; <a href="#biographie">Biographie</a></div>

Upvotes: 0

Prashanthi
Prashanthi

Reputation: 153

Add these properties to your header id

header

{

position: sticky;
top: 10;
text-align: center;
font: Italic 18px/29px 'pensumpro-book';
letter-spacing: 0px;
color: #000000;
opacity: 1;

}

Upvotes: 1

Related Questions