I customized a WordPress theme that has a fixed header (which includes logo and navbar) and everything works fine on desktop Chrome. However, when viewing on mobile phones, header gets cut off by ~20px when you scroll down the page.

I tried setting fixed height to various elements, adding overflow: auto, and even line-height:90px to .header, but nothing seems to work.

Website is http://nadjapavic.com

Relevant html:

<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#content"><?php esc_html_e( 'Skip to content', 'pine' ); ?></a>

    <div class="offcanvas">
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'main-nav', 'container' => false ) ); ?>
    </div><!-- /.offcanvas -->

    <header class="header animated bounceInDown">
        <div class="container">
            <div class="row">
                <div class="col-xs-6">

                    <?php pine_logo(); ?>
                </div><!-- /.col -->

                <div class="col-xs-6">
                    <button class="offcanvas-toggle">
                        <span></span>
                        <span></span>
                        <span></span>
                    </button><!-- /.main nav toggle -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </header><!-- /.header -->

    <?php if ( ! is_404() ) : ?>
    <div class="header-spacer"></div><!-- /.header spacer -->
    <?php endif; ?>

    <div id="content">

Relevant css:

.header {
  position: fixed;
  width: 100%;
  background-color: #fff;
  padding: 20px 0;
  z-index: 10000;
}
.header-spacer {
  min-height: 90px;
}

Relevant javascript:

( function( $ ) {
    'use strict';

    var $body = $( 'body' );
    var $header = $( '.header', $body );
    var $headerSpacer = $( '.header-spacer', $body );
    var $offcanvas = $( '.offcanvas', $body );
    var $adminbar = $( '#wpadminbar', $body );

    $( document ).on( 'ready', function() {
        $adminbar = $( '#wpadminbar', $body );
    } );

    var adaptHeaderSpacerTimeout = null;
    var nothing = null;
    var $headerHeight = $header.outerHeight();
    var adaptHeaderSpacer = function() {
        if ( adaptHeaderSpacerTimeout !== null ) {
            clearTimeout( adaptHeaderSpacerTimeout );
        }

        setTimeout( function() {
            nothing = $header[0].offsetHeight;
            $headerHeight = $header.outerHeight();
            $headerSpacer.css( 'height', $headerHeight + 'px' );
            if ( $body.hasClass( 'admin-bar' ) && $adminbar.length ) {
                $offcanvas.css( 'top', ( $headerHeight + $adminbar.outerHeight() ) + 'px' );
            }
            else {
                $offcanvas.css( 'top', $headerHeight + 'px' );
            }
        }, 400 );
    };
    adaptHeaderSpacer();

    $( 'img', $header ).on( 'load', adaptHeaderSpacer );
    $( document ).on( 'ready', adaptHeaderSpacer );
    $( window ).on( 'resize orientationchange', adaptHeaderSpacer );

    // Full-screen navigation
    var $offcanvasToggle = $( '.offcanvas-toggle' );
    $offcanvas = $( '.offcanvas' );
    $offcanvasToggle.on( 'click', function() {
        $offcanvas.toggleClass( 'offcanvas--active' );
        $offcanvasToggle.toggleClass( 'offcanvas-toggle--active' );

} );

Please help.

Read more here: Fixed header gets cut off on mobile phones


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: