Question

I have a top menu bar that is in position fixed and contains some text. When the screen is resized smaller it compresses and it’s height increases to fit the text.

I have a div below the top menu bar that contains my website content, moved down using padding-top.

When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.

#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}

#content {padding-top:40px;}

What is the best way around this so the resized top menu bar does not cover my content?

The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?

Answer 1

Pure JavaScript solution (no jQuery required):

window.onresize = function() {
    document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};