Question

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

    <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(); ?>>

我更喜欢将标题固定为当前（在页面滚动时移动） - 但它应该提供空间以容纳它上方的通知栏和它下面的横幅，而不是隐藏它们。

先谢谢。

Answer 1

您正在使用以前使用此主题的shop-isle主题。首先你需要去本地文件夹“wp-content＆gt; themes＆gt; shop-isle＆gt; inc＆gt; structure＆gt; 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*/
    }
}

标题导航栏覆盖通知栏（在其上方）及其下方的任何横幅

1 个答案: