Question

我做了很多搜索，但找不到任何有用的东西。我正在开发一个WP主题，顶部有一个Bootstrap固定导航栏。一切都很顺利，但随着我开始添加更多菜单项，菜单高度扩展并开始覆盖内容。由于这是一个主题，而其他人可以开始在导航中添加很多链接，我需要一种方法将身体填充设置为导航栏的高度。

这是HTML：

<body class="page-template page-template-page-full-width page-template-page-full-width-php page page-id-42">

    <header role="banner">

        <div id="inner-header" class="clearfix">

            <div class="navbar navbar-fixed-top">
                <div class="navbar-inner">
                    <div class="container-fluid nav-container">
                        <nav role="navigation">
                           <div class="span3">
                            <a class="brand" id="logo" title="Just another WordPress site" href="http://corpuschristi2:8888/corpuschristi">
                                                                        <img src="http://corpuschristi2:8888/corpuschristi/wp-content/uploads/2017/07/cc_logo_white.png" alt="Just another WordPress site">
                                                                            <!--<img src="" alt="">-->
                                    </a>
                                                            </div>
                                                        <div class="span9">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>

                            <div class="nav-collapse">
                                <ul id="menu-main-menu" class="nav"><li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/recent-news/">Recent News</a></li><li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-42 current_page_item active"><a href="http://corpuschristi2:8888/corpuschristi/test-page/">Full Width Page w/fi</a></li><li id="menu-item-119" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/full-width-page-wo-fi/">Full Width Page w/o FI</a></li><li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/sample-page/">Left Side Bar Page w/FI</a></li><li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/left-sidebar-wo-fi/">Left sidebar w/o FI</a></li><li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page/">Regular Page w/ FI</a></li><li id="menu-item-111" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://corpuschristi2:8888/corpuschristi/regular-page-wo-fi/">Regular Page w/o FI</a></li></ul>                              </div>
                                                        </div>
                        </nav>


                    </div> <!-- end .nav-container -->
                </div> <!-- end .navbar-inner -->
            </div> <!-- end .navbar -->

        </div> <!-- end #inner-header -->

    </header> <!-- end header -->

    <div class="container-fluid">
                            <div style="position: relative">
    <h1 class="title-over-image">Full Width Page w/fi</h1>...

非常感谢任何帮助。

Answer 1

你能抓住导航栏的高度并使用jquery设置填充吗？

$('body').css('padding-top',$('.navbar').height)

Answer 2

使用jquery设置填充。

在function.php中添加以下函数

<?php
function myscript() {
?>
<script type="text/javascript">
jQuery( document ).ready( function( $ ) {
    jQuery('body').css('padding-top',jQuery('.navbar').height);
} );
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );
?>

Answer 3

<?php
function myscript() {
?>
<script type="text/javascript">
jQuery( document ).ready( function() {
    jQuery('body').css('padding-top',jQuery('.navbar').height());
} );
</script>
<?php
}
add_action( 'wp_footer', 'myscript' );
?>

Answer 4

解决方案是：

$('body').css('padding-top',$('.navbar').outerHeight(true));

似乎只有使用.height在高度设置为auto时才会出现问题。使用.outerHeight（），它能够获得正确的值。

使用javascript设置主体填充以移动到固定导航下方

4 个答案: