I've been working on implementing a sticky header for my current webpage, and I've set all margins in "rem". However, when I adjust the font size for the main header that contains all the header content, only the ul list part seems to be affected while the other margins remain unchanged. Can anyone offer some advice on what might be causing this issue?
My goal is to make the header appear slimmer as I scroll down.
JQuery code:
$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
$('.mheader').addClass("sticky_header");
}
else {
$('.mheader ').removeClass("sticky_header");
}
})
CSS header code:
.mheader {
width: 100%;
height: 4.75rem;
box-shadow: 1px 1px 1px #ccc;
background: #eee;
}
.sticky_header {
position: fixed;
z-index: 999;
font-size: 0.8rem !important;
transition: all 1s ease;
}
.mheader__logo img {
position: relative;
width: 10.1%;
float: left;
height: 2.3rem;
margin: 1.225rem 0.9375rem;
}
... (CSS code continues)
HTML code
<header class="mheader">
<div class="mheader__logo">
<a href="/index.php"><img src="/assets/img/logo.png" alt=""></a>
</div>
... (HTML code continues)
</header>
Thank you