-1

我正在为我的网站Zumpak.com使用 wordpress 我试图在标题菜单上放置一个通知栏，以便将消息传递给访问者。我放：

    <div id="dabar" class="hide_on_mobile">Your website message.</div>

就在收盘头下方。但是导航栏遮住了它，因此它不可见。我尝试使用 css 代码并尝试各种组合“位置”和“z-index”属性，但无济于事。

同样，当我尝试在导航栏下方放置横幅图像时，导航栏也克服了这一问题。我在用：

    <div class="headerbanner"><a href="BANNERLINK" target="_blank"><img src="LINKTOIMAGE" width="200" height="50" /></a></div>

刚过

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

我希望标题按当前状态固定（随着页面滚动而移动） - 但它应该留出空间来容纳其上方的通知栏和其下方的横幅，而不是隐藏它们。

提前致谢。

4

1 回答 1

0

您使用的是 shop-isle 主题，我之前使用过这个主题。所以首先你需要去本地文件夹“ wp-content > Themes > shop-isle > inc > structure > header.php”

在 header.php 中找到 Navigation 开始的位置。如果您与我的代码有相似之处，请替换或粘贴此内容。请参阅 html 中的注释掉部分。

    <!-- Navigation start -->
    <nav class="navbar navbar-custom navbar-transparent navbar-fixed-top" role="navigation">

您的网站消息。 

                <div class="navbar-header">
                    <?php

                        $shop_isle_logo = get_theme_mod('shop_isle_logo');
                        echo '<div class="shop_isle_header_title"><div class="shop-isle-header-title-inner">';
                        if( !empty($shop_isle_logo) ):
                            echo '<a href="'.esc_url( home_url( '/' ) ).'" class="logo-image"><img src="'.esc_url( $shop_isle_logo ).'"></a>';
                            if( is_customize_preview() ):
                                echo '<h1 class="site-title shop_isle_hidden_if_not_customizer""><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
                                echo '<h2 class="site-description shop_isle_hidden_if_not_customizer"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';
                            endif;
                        else:
                            if( is_customize_preview() ):
                                echo '
                                        <a href="'.esc_url( home_url( '/' ) ).'" class="logo-image shop_isle_hidden_if_not_customizer">
                                            <img src="">
                                        </a>
                                    ';
                            endif;                          
                            echo '<h1 class="site-title"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'name' ).'</a></h1>';
                            echo '<h2 class="site-description"><a href="'.esc_url( home_url( '/' ) ).'" title="'.esc_attr( get_bloginfo( 'name', 'display' ) ).'" rel="home">'.get_bloginfo( 'description' ).'</a></h2>';
                        endif;
                        echo '</div></div>';
                    ?>

                    <div type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
                        <span class="sr-only"><?php _e('Toggle navigation','shop-isle'); ?></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </div>
                </div>

                <div class="header-menu-wrap">
                    <div class="collapse navbar-collapse" id="custom-collapse">

                        <?php wp_nav_menu( array('theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav navbar-nav navbar-right') ); ?>

                    </div>
                </div>

                <?php if( class_exists( 'WooCommerce' ) ): ?>
                    <div class="navbar-cart">

                        <div class="header-search">
                            <div class="glyphicon glyphicon-search header-search-button"></div>
                            <div class="header-search-input">
                                <form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/'  ) ); ?>">
                                    <input type="search" class="search-field" placeholder="<?php echo esc_attr_x( 'Search Products&hellip;', 'placeholder', 'shop-isle' ); ?>" value="<?php echo get_search_query(); ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label', 'shop-isle' ); ?>" />
                                    <input type="submit" value="<?php echo esc_attr_x( 'Search', 'submit button', 'shop-isle' ); ?>" />
                                    <input type="hidden" name="post_type" value="product" />
                                </form>
                            </div>
                        </div>

                        <?php if( function_exists( 'WC' ) ): ?>
                            <div class="navbar-cart-inner">
                                <a href="<?php echo esc_url( WC()->cart->get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart','shop-isle' ); ?>" class="cart-contents">
                                    <span class="icon-basket"></span>
                                    <span class="cart-item-number"><?php echo esc_html( trim( WC()->cart->get_cart_contents_count() ) ); ?></span>
                                </a>
                            </div>
                        <?php endif; ?>

                    </div>
                <?php endif; ?>

            </div>
        </div>

    </nav>    
  <div class="headerbanner"><!-- YOUR HEADER Banner div start-->
  <a href="#">
  <img class="img-header" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTuHUWTj_eul7PK7PmPTmDjb01yDSIZyuBHkxZwJq9bm1XV5vg" alt="Img-alt-txt" /> 
</a>
    </div><!-- YOUR HEADER Banner div end-->

    <!-- Navigation end -->

现在在您的 custom.css 或 style.css 中添加您的样式，这是我的

div#dabar {
background: red;
height: 20px;
color: white;
font-weight: bold;
text-align: center;
display:block;
}
div.headerbanner a > img.img-header{
width:100%;
height:auto;
margin:0 auto;
display:block;
}
@media only screen and (max-width: 475px) {
    div#dabar {
        display:none; /*Hide iN mobile*/
    }
}

移动视图 右视图

于 2016-11-04T22:23:02.770 回答