After extensive searching, I've come across various solutions but none of them seem to fit my needs. I am a beginner/amateur developer.
The issue I am facing is with a fixed header that resizes when scrolling. I understand that by adding padding-top: 100px, my content will stay below the fixed header. However, as the size of the fixed header changes while scrolling, I want the top padding of the content section to automatically adjust based on the size of the fixed header.
<header id="main-header" class="">
<div class="wrapper">
<div id="navigation">
<nav id="top-menu-nav">
<ul id="top-menu" class="nav">
<li> menu 1</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="content">
CSS
#main-header{position:fixed;z-index:99999;width:100%}
#content{position:relative}
I have attempted to use the following script in my header, but it does not seem to work. Can you help me figure out what I am doing wrong?
Script
<script>
$(window).resize(function(){
var height = $('#main-header').height();
$('#content').css({'padding-top':height});
}).trigger('resize');
</script>