How to show the hidden content by the sticky header?

[tirengarfio]

Hi

I want to create a sticky header so I have added the property “position: fixed” to it. But now the content right below is being hidding by this header. How should I solve it? Just giving a margin top to the hideen content?

Here is the site: http://www.ziiweb.com

Javi

[Senff]

Since your header has position fixed, the other elements on the page will not “see” it and act like it’s not there (called “taken out of the flow of the document”). So, you’ll have to create some space to position the rest of the page, as if the menu’s not there.

Give the .container a top padding of 175px and the header (the one that’s sticky) a top position of 0.

[tirengarfio]

Thanks, I have added those properties you say, but.. should I keep the “position: fixed”? If I have to keep “position: fixed”, wha are improving exactly the properties you mention?

I have here the result: http://www.ziiweb.com

[Paulie_D]

As far as I can see your <header> needs to have

position:fixed;
top:0;
width:1170px; 

and the div below <div class="container">

needs

padding-top:175px;

I think that will work…won’t it?

[jurotek]

There’s few issues with your header. First of all, the right way to style your fixed header would be like this:

.tab-content.cabecera {
position:fixed;
top:0;
background:#fff;
border-bottom:1px doted #ccc;
width:100%;
max-width:1170px;
z-index:10;
}

Now, when you re-size browser window to 1024px width, only half of your navigation is visible due to having not enough room after logo and social div. So you either float left social div at this point below logo or convert your navigation to drop-down like you have at 768px width and below.

You put top padding on you container and also top margin on tab-content slides. You either do one or the other cause you have a big gap below header which affects vertical flow.

BTW, your social div overlaps logo at 640px width and below.

[Author]

Posts