You need to add a few CSS rules, one which sets the header area as fixed, and the other which adds some spacing between the content area and the top of the browser, because making the header fixed takes the header “out of the document flow” (i.e., if the header is fixed, then the browser acts as if the header isn’t there and will try to slide the content under the header).
I see that you have Jetpack installed. Activate the Custom CSS option by going to Jetpack → Settings. After that option is activated, you should see an option under Appearance → Edit CSS. Copy & paste these rules at the very end of the CSS Stylesheet Editor:
#masthead {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
body #click-menu {
position: fixed;
}
#content {
margin-top: 246px;
}
The first rule fixes the header in place. The second rule also fixes the hamburger menu in place, since it looks like it was added in through a plugin and not part of the original header. The third rule adds spacing at the top of the content so it’s not hidden by the fixed header.
Thread Starter
ronstv
(@ronstv)
Thank you so much.
Working perfectly now, Cheers Bud