Question

在我疯了之前，我现在问你。目前我定制了一个包含bootstraps的wordpress主题。主/索引页看起来很棒但是那些有另一个高潮的子页面会造成麻烦。每次我加载一个子页面（不在chache中）时，内容会显示在top-menue下面，之后会下降到正确的位置。我在chrome开发人员工具中看到body-class-element中有一个padding-top声明。因为我认为它与bootstrap有关，我检查了它的所有css和js文件。但我无法找到预防或解决问题的答案。

修改

这是header.php的代码。在＆lt;之后的文件顶部/ head＆gt;你看到body_class产生问题，并给它们填充顶部值84px。下面的直接是菜单项的分支。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title><?php wp_title(); ?></title>
<?php apex_favicon(); ?>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <?php
    $settings = apex_section_settings();
    if( $settings['page_top'] == 'header' ) {
        get_template_part( 'templates/elements/header' );
    } elseif( $settings['page_top'] == 'hero' ) {
        get_template_part( 'templates/elements/hero' );
    }
    ?>

    <?php global $apex_general_settings; ?>

    <header id="site-navigation" class="apex-style-<?php echo $apex_general_settings['navigation_style']; ?>">
    <div id="site-navigation-contents">
      <div class="container">

                <?php echo get_apex_menu_logo(); ?>

                <a id="mobile-menu-toggle" href="#"><i class="apex-icon-mobile-menu"></i></a>

                <?php
                $args = array(
                    'theme_location'        => 'apex-primary-menu',
                    'menu_class'                => 'apex-primary-menu clearfix',
                    'container'                 => 'nav',
                    'container_class'       => 'apex-primary-menu-container',
                    'fallback_cb'               => 'primary_menu_fallback',
                    'walker'                    => new Apex_Icon_Menu_Walker()
                );
                wp_nav_menu( $args );
                ?>

            </div><!-- .container -->
    </div><!-- #site-navigation-contents -->
  </header><!-- #site-navigation -->

  <div id="wrapper">

        <div id="main" role="main">

开发人员工具的一些屏幕截图：

https://i.stack.imgur.com/uD2xg.png https://i.stack.imgur.com/81vaJ.png

js-file菜单部分的代码片段：

/* --------------------------------------------------------- */
    /* !Main menu position - 1.0.0 */
    /* --------------------------------------------------------- */

    function apex_visible_menu_height() {
        $('body').css('paddingTop', nav_h+'px');
    }

    function apex_hidden_menu_reset() {
        $nav_contents.stop().css({
            marginTop: -nav_h+'px'
        });

        nav_visible = true;
    }

    function apex_hidden_menu_display( top ) {

        if( !nav_visible && top > nav_offset ) {

            nav_visible = true;

            $nav_contents.stop().animate( {
                marginTop: 0
            }, 700, 'easeOutQuint', function() {
                nav_h = $nav_contents.outerHeight(true);
                if( $admin_bar.length > 0 ) {
                    nav_h += $admin_bar.outerHeight(true);
                }
            });

        } else if( nav_visible && top < nav_offset ) {

            nav_visible = false;

            $nav_contents.stop().animate( {
                marginTop: '-'+nav_h+'px'
            }, 700, 'easeOutQuint', function() {
                // Animation complete.
            });

            if( is_mobile ) {
                apex_mobile_menu_hide( true );
            }
        }
    }

Wordpress Bootstrap - 内联margin-top

0 个答案: