How to keep header fixed without changing height when using scroll

Question

On my page I have a header fixed at the top, but when I scroll the page and return to the top the header height is changed, I made some attempts, like removing that line, I deleted the div.Hidden-header, because as it got a fixed height, she’s pushing the header.clearfix down

<div class="hidden-header"></div>

The page can be seen here: Project

Answer 1

Dear, inside your file script js. there is a function scrollPage(), is responsible for changing its header, follows below the function.

function scrollPage() {
    var sy = scrollY();
    if ( sy >= changeHeaderOn ) {
        $('.top-bar').slideUp(300);
        $("header").addClass("fixed-header");
        $('.navbar-brand').css({ 'padding-top' : 19 + "px", 'padding-bottom' : 19 + "px" });

        if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
        }else{
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 20 + "px", 'padding-bottom' : 20 + "px" })
            $('.search-side').css({ 'margin-top' : -7 + "px" });
        };

    }
    else {
        $('.top-bar').slideDown(300);
        $("header").removeClass("fixed-header");
        $('.navbar-brand').css({ 'padding-top' : 27 + "px", 'padding-bottom' : 27 + "px" });

        if (/iPhone|iPod|BlackBerry/i.test(navigator.userAgent) || $(window).width() < 479 ){
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })
        }else{
            $('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })
            $('.search-side').css({ 'margin-top' : 0  + "px" });
        };

    }
    didScroll = false;
}

So you can comment on the function if there is no hindrance or simply change these lines:

$('.search-side').css({ 'margin-top' : -7 + "px" });

for

$('.search-side').css({ 'margin-top' : 0 + "px" });

and

$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 28 + "px", 'padding-bottom' : 28 + "px" })

for

$('.navbar-default .navbar-nav > li > a').css({ 'padding-top' : 0 + "px", 'padding-bottom' : 0 + "px" })

The alternative of changing the values, I tested by replacing the code with the Chrome console on your site and it worked.