2016-11-04 3 views
-2

내 웹 사이트에 wordpress를 사용하고 있습니다. Zumpak.com 헤더 메뉴 위에 알림 표시 줄을 넣어 방문자에게 메시지를 전달하려고합니다. 다음과 같이 입력합니다 :헤더 탐색 표시 줄이 그 위에있는 알림 표시 줄과 그 아래의 배너를 덮고 있습니다.

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

닫기 머리 바로 아래. 그러나 navbar는 그것을 모호하게하므로 보이지 않습니다. 나는 css 코드로 노려 보았고 'position'및 'z-index'속성에 대한 다양한 조합을 시도했지만 아무 소용이 없었다.

마찬가지로 내 배너 막대 아래에 배너 이미지를 넣으려고 할 때 navbar도이를 극복합니다. 내가 사용 : 그것은 현재로

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

단지

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

후 내가 헤더를 선호하는 고정합니다 (페이지와 이동이 스크롤) -하지만 통지를 수용 할 수있는 공간을 제공한다 그것의 위 막대기 및 그것의 밑에 기치 및 그들을 숨기지 말라.

미리 감사드립니다.

+0

질문입니다 이 코드는 작동합니까? ")에는 원하는 동작, 특정 문제 또는 오류 및 질문 자체에서이를 재현하는 데 필요한 가장 짧은 코드가 포함되어야합니다. 분명한 문제 설명이없는 질문은 다른 독자에게 유용하지 않습니다. 참조 : [최소한의 완전하고 검증 가능한 예제를 만드는 방법] (http://stackoverflow.com/help/mcve). – LGSon

+0

또한

Your website message.
을 html로 찾아 보지 마세요. @ https://zumpak.com/en/ –

+0

@MostafaBaezid 내 로컬 호스트에서 시도 중이며 아직 살아 있지 않습니다. 어떻게 보이게하기 위해 그것을 복제 할 수 있습니까? –

답변

0

shop-isle 테마를 사용하고 있습니다. 이전에이 테마를 사용했습니다. 먼저 로컬 폴더 "wp-content> 테마> shop-isle> 구조> header.php"가 필요합니다.

In header.php where 탐색 시작. 내 코드와 비슷한 경우이 코드를 바꾸거나 붙여 넣으십시오. html의 주석 섹션을 참조하십시오.

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

귀하의 웹 사이트 메시지. 여기 당신의 스타일을 추가하려면 custom.css에 나있는 style.css에서 지금

   <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 --> 

가없는 이유 "(디버깅 도움을 구하고 내

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*/ 
    } 
} 

Mobile View Dextop View