Question

我自定义了一个具有固定标题（包括徽标和导航栏）的WordPress主题，并且桌面Chrome上的一切正常。但是，在手机上查看时，当您向下滚动页面时，标题会被切断~20像素。

我尝试将固定高度设置为各种元素，添加overflow：auto，甚至line-height：90px到.header，但似乎没有任何效果。

相关的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">

相关的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' );

} );

请帮忙。

Answer 1

您似乎正在使用Bootstrap或类似的网格系统。在这些系统中，.row需要包装.container。将container课程添加到#content。缺少.container会使特定.row推动body更大，从而为您提供效果。

固定标头在手机上被切断

1 个答案: