Push the content behind the fixed position header

Question

I have created fiddle regarding the problem issue in link here

Header and footer are absolutely positioned and 100% width. The middle content consists of the dashboard table. Header consists of two images, which on clicked, will toggle the content.
When I click on slide-toggle-1, the content of headerbottombar is revealed.
But the middle content is hidden and overlapped.
How can I properly show content of middle content when the slide-button-1 and slide-button-2 is clicked.
I would like to thank for all suggestions and solutions. Solutions are acceptable either in css, jquery and javascript as long as feasible solutions are presented.

Explain more about your problem . i saw your code and it worked properly . when toggle opened the content of behind must be hidden . what do you want to do ? — SAYE, Sep 27 '16 at 05:44
When the toggle is opened, I want the div class content to follow behind the header. In my case, the div class content is laying behind the header. — pallavidestiny22, Sep 27 '16 at 05:48

score 0 · Answer 1 · edited May 23 '17 at 10:27

0

Update : If you want a variable height header that's sticky to the top, you might have to use some javascript that dynamically adjusts the top margin of the content

var offset = document.getElementById("sticky-top-id").offsetHeight;
document.getElementById("content-id").style.marginTop = offset + 'px';

Source

Old Answer :

There are many ways to achieve what you want. One is to change the position of header to relative (and remove the line breaks between header and content). If you use fixed or absolute position, the header will overlap with the body content. Whereas relative will push the content down as the header expands.

See this : https://jsfiddle.net/d0pyxdoj/3/

P.S. Header/Footer have position fixed in your code, not absolute

edited May 23 '17 at 10:27

Community

1
1

answered Sep 27 '16 at 05:47

user6885709

71
3

1

In my case, it is clients demand that header be alwasy visible and stick to top as well – pallavidestiny22 Sep 27 '16 at 05:53
So I used header fixed positioning – pallavidestiny22 Sep 27 '16 at 05:54

score 0 · Accepted Answer · answered Sep 27 '16 at 05:51

0

Why dont you try adding a class with margin-top to bring the div down as much as needed. Like this:

.top{ margin-top:100px; }

Add this to you div with ".content" Like so:

<div class="content top">

Then just toggle it on the 2 clicks like:

$( ".content" ).toggleClass( "top" );

You can give additional styles, but this is the basic run down.

answered Sep 27 '16 at 05:51

Mark Philip D'santos

213
1
10

can i have fiddle please – pallavidestiny22 Sep 27 '16 at 05:56

score 0 · Answer 3 · answered Sep 27 '16 at 06:53

Please check the below example. Height identification using script we can inject the spacing.

Script:

function heightCalc(){
         topHeight = $('.sticky-top').height();
       $('.content').css({"margin-top": topHeight+"px"});
     }

Example Fiddler : https://jsfiddle.net/scj4u0t5/1/

Push the content behind the fixed position header

3 Answers3