CSS Sticky header

Asked 16/9, 2013 at 11:16 Answered 7/6, 2023 at 23:47

I have added a sticky header to my homepage, however the sticky header seems to be behind the rest of the content on the page, so when i scroll down the page, images and text are on top of the header, is there a way to stop this?

Here is my code:

<style>
/* Reset body padding and margins */
body
{
    margin: 0;
    padding: 0;
}

/* Make Header Sticky */
#header_container
{
    background: #827878;
    border: 1px solid #666;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
    top: 0;
}

#header
{
    line-height: 60px;
    margin: 10 auto;
    width: 940px;
    text-align: left;
    font-size: 26px;
    color: #f5f5f5;
    line-height: 28px;
    margin-bottom: 14px;
    font-family: 'Source Sans Pro',sans-serif;
}

/* CSS for the content of page. I am giving top and bottom 
   padding of 80px to make sure the header and footer 
   do not overlap the content. */
#container
{
    margin: 0 auto;
    overflow: auto;
    padding: 80px 0;
    width: 940px;
}

#content
{
}

/* Make Footer Sticky */
#footer_container
{
    background: #eee;
    border: 1px solid #666;
    bottom: 0;
    height: 60px;
    left: 0;
    position: fixed;
    width: 100%;
}

#footer
{
    line-height: 60px;
    margin: 0 auto;
    width: 940px;
    text-align: center;
}
</style>


<!-- BEGIN: Sticky Header -->
<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->

Fissure answered 16/9, 2013 at 11:16 Comment(1)

Something like this? Added z-index:9999 to header container. jsfiddle.net/hGYkt – Endgame 16/9, 2013 at 11:19

Add this code: Add z-index: 1000 in both #header_container & z-index: 1001 in #header styles.

#header_container { 
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1000;
}

#header {
    z-index: 1001;
}

Mosstrooper answered 16/9, 2013 at 11:22 Comment(3)

Thanks, This worked however my menu is the only thing staying on top. here is my menu CSS

menu_sticky { 	float: left; 	width: 100%; 	top: 200px; 	position: absolute; 	z-index: 1001; 	background: #f9f9f9 url(../images/menu-shadow.png) repeat-x left bottom; }

– Fissure 16/9, 2013 at 12:6

Why not add z-index: 2001; ? It's 1000x better. ; ) – Faustena 5/2, 2019 at 1:44

Another thing you could* do... is actually move the header markup to the bottom of the page. Things naturally stack up as you move down through the markup. – Faustena 5/2, 2019 at 1:46

Just use z-index parameter. For example z-index: 2 (present the order of the layer) It's available only for elements that use position: absolute, relative or fixed

W3schools example: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Sent from iphone

Moiety answered 16/9, 2013 at 11:21 Comment(0)

<style type="text/css">
body{
    margin:0px;
    background:#000;
}
.header-cont {
    width:100%;
    position:fixed;
    top:0px;
}
.header {
    height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
}
.content {
    width:960px;
    background: #F0F0F0;
    border: 1px solid #CCC;
    height: 2000px;
    margin: 70px auto;
}
</style>
</head>
<body>

<div class="header-cont">
    <div></div>
</div>

<div></div>

Click here to Check this best link for Sticky header using css

Pre answered 6/4, 2015 at 14:34 Comment(0)

I am looking for a solution so that I can use it for my client luckily I found a solution that also works if you are using a WordPress plugin called Elementor inside that container you can put the code which is also put similar to the code below.

.sticky-cssSelector-here {
  position: sticky;
  top: 0;
  /* for alignment below */
  align-self: flex-start;
  height: calc(100vh - 45px); /* this is to set a fixed height in different screen sizes and 100 view height for a maximum height of the element */
  padding-top: 100px; // here you can adjust this one as well to make your element viewable

Note: the CSS selector is the one you should place inside the element you want to insert.

If that doesn't work you can try this code below: position: absolute; z-index:9999;

Sabrina answered 7/6, 2023 at 23:47 Comment(0)

-3

To your header add:

position:absolute;
z-index:9999;

This will lift it above everything else

Frizz answered 16/9, 2013 at 11:19 Comment(1)

OP is using a 'sticky' header, position: absolute; would break that functionality. They've already got position: fixed; so z-index is the only thing needed. – Wolfort 16/9, 2013 at 11:23

Recommended topics

Hot tags