'Change font-size does not influence whole header

I am trying to do sticky header on my existing page an I have all margins in rem but when I set up font-size for main header which contains all header content is influenced just ul list part and other margins are the same. Can you please advice me what is problem?

I want to make header more slim when 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;
}

.mheader__nav {
    float: left;
    width: 55%;
    margin: 0.9375rem 0 0.9375rem 0;
}

.mheader__nav-mobilemenu {
    display: none;
}

.mheader__nav-list {
    width: 100%;
    margin:  0;
}

.mheader__nav-list li {
    float: left;
    width: 18%;
    margin: 0 20px;
    padding-left: 10px;
    border-left:  1px solid #ccc;
    list-style-type: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
}

.mheader__nav-list a {
    display: block;
    text-decoration: none;
    color: black;
}

.mheader__nav-list a:hover {
    color: black;
    border-bottom: 2px solid #111;
}

.mheader__search {
    position: relative;
    float: right;
    width: 25%;
    margin: 1.225rem 1.875rem 1.225rem 0;
}

.mheader__search input {
    width: 100%;
    height: 2.3rem;
    border: 1px solid #aaa;
    border-radius: 0.25rem;
    font-size: 1.0625rem;
    padding-left: 0.25rem;
}

.mheader__search-button {
    position: absolute;
    right: 0px;
    top: 4px;
}

.mheader__search button {
  float: right;
  border: none;
  background: none;
  font-size: 1.125rem;
  cursor: pointer;
}

HTML code

        <header class="mheader">
                <div class="mheader__logo">
                    <a href="/index.php"><img src="/assets/img/logo.png" alt=""></a>
                </div>
                <div class="mheader__nav">
                    <a href="#menu" class="mheader__nav-mobilemenu">
                        <img src="/assets/img/mob-menu.svg" alt="">
                    </a>
                    <!--<i class="fa fa-bars"></i>-->
                    <ul class="mheader__nav-list group">
                        <!-- use absolute path -> do not change path with subfolder-->
                        <li><a href="/index.php">Job </br>ToDo</a></li>
                        <li><a href="/activity.php">Activity </br>Home</a></li>
                        <li><a href="/blog/home.php"></br>BLOG</a></li>
                        <li><a href="../_inc/auth/logout.php">Sign </br>Out</a></li>
                    </ul>
                </div>
                <div class="mheader__search">
                    <input type="text" placeholder="Search...">
                    <div class="mheader__search-button">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </div>
                </div>
        </header>

Thank you

html jquery css

Solution 1:^[1]

Make sure you use EM instead of REM if you want to make it relative to some parent. So all the REM sizes are based on the <html> tag.

If you do em,

$(window).scroll(function() {

    if ($(this).scrollTop() > 10) {
        $('.mheader').addClass("sticky_header");
    }
    else {
        $('.mheader ').removeClass("sticky_header");
    }

})

body{
height:4000px;
}
.mheader {
    width: 100%;
    height: 4.75rem;
    box-shadow: 1px 1px 1px #ccc;
    background: #eee;
}

.sticky_header {
    position: fixed;
    z-index: 999;
    font-size: 0.8em !important;
    transition: all 1s ease;
}

.mheader__logo img {
    position: relative;
    width: 10.1%;
    float: left;
    height: 2.3em;
    margin: 1.225em 0.9375em;
}

.mheader__nav {
    float: left;
    width: 55%;
    margin: 0.9375em 0 0.9375em 0;
}

.mheader__nav-mobilemenu {
    display: none;
}

.mheader__nav-list {
    width: 100%;
    margin:  0;
}

.mheader__nav-list li {
    float: left;
    width: 18%;
    margin: 0 20px;
    padding-left: 10px;
    border-left:  1px solid #ccc;
    list-style-type: none;
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Roboto Condensed', sans-serif;
}

.mheader__nav-list a {
    display: block;
    text-decoration: none;
    color: black;
}

.mheader__nav-list a:hover {
    color: black;
    border-bottom: 2px solid #111;
}

.mheader__search {
    position: relative;
    float: right;
    width: 25%;
    margin: 1.225em 1.875em 1.225em 0;
}

.mheader__search input {
    width: 100%;
    height: 2.3em;
    border: 1px solid #aaa;
    border-radius: 0.25em;
    font-size: 1.0625em;
    padding-left: 0.25em;
}

.mheader__search-button {
    position: absolute;
    right: 0px;
    top: 4px;
}

.mheader__search button {
  float: right;
  border: none;
  background: none;
  font-size: 1.125em;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="mheader">
                <div class="mheader__logo">
                    <a href="/index.php"><img src="/assets/img/logo.png" alt=""></a>
                </div>
                <div class="mheader__nav">
                    <a href="#menu" class="mheader__nav-mobilemenu">
                        <img src="/assets/img/mob-menu.svg" alt="">
                    </a>
                    <!--<i class="fa fa-bars"></i>-->
                    <ul class="mheader__nav-list group">
                        <!-- use absolute path -> do not change path with subfolder-->
                        <li><a href="/index.php">Job </br>ToDo</a></li>
                        <li><a href="/activity.php">Activity </br>Home</a></li>
                        <li><a href="/blog/home.php"></br>BLOG</a></li>
                        <li><a href="../_inc/auth/logout.php">Sign </br>Out</a></li>
                    </ul>
                </div>
                <div class="mheader__search">
                    <input type="text" placeholder="Search...">
                    <div class="mheader__search-button">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </div>
                </div>
        </header>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	GeoDev

'Change font-size does not influence whole header

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]