응답 슬라이드

Question

내가 정의 워드 프레스 테마 메뉴 밖으로 반응 슬라이드를 구축하기 위해이 자습서를 사용하는 워드 프레스 또는 메뉴 없음.

나는 튜토리얼에서이 단계를 수행하는 추측하고있어 :

//* Wrap .nav-primary in a #primary-nav-container div 
remove_action('genesis_after_header', 'genesis_do_subnav'); 
add_action('genesis_after_header', 'genesis_do_subnav', 11); 

add_action('genesis_after_header', 'sk_add_opening_div', 9); 
function sk_add_opening_div() { 
echo '<div id="primary-nav-container">'; 
} 
add_action('genesis_after_header', 'sk_add_closing_div'); 
function sk_add_closing_div() { 
echo '</div>'; 
} 

//* Add hamburger font icon below Primary nav 
add_action('genesis_after_header', 'sk_hamburger_menu'); 
function sk_hamburger_menu() { 

echo '<div id="primary-nav-link-container"><div class="wrap"><a id="primary-nav-link"    href="#primary-nav-container"><i class="fa fa-bars"></i> Menu</a></div></div>'; 

} 

내가 위의 코드를 수행 할 창세기 후크를 사용할 수없는 사용자 지정 테마를 사용하고 있기 때문에, 그래서 이것은 내 코드 (header.php에서) 메뉴를 표시합니다 :

<div id="primary-nav-link-container"> 
      <div class="wrap"> 
       <a id="primary-nav-link" href="#primary-nav-container"> 
        <i class="fa fa-bars"></i> Menu</a> 
        <div class="nav-primary"> 
        <div id="primary-nav-container"> 
         <divid="menu">     
<?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu')); ?> 
           </div> 
          </div> 

사람이 난 단지 모바일 사용 CSS 미디어 쿼리에 응답 메뉴를 표시 할 수있는 방법 어떤 아이디어가 있습니까? 아래 코드를 사용하고 있지만이 경우에만 메뉴의 바탕 화면 버전이 전혀 표시되지 않습니다.

CSS의 :

#primary-nav-link-container { 
text-align: center; 
display: none; 
} 

a#primary-nav-link:focus { 
outline: none; 
} 

@media only screen and (max-width: 1023px) { 

#primary-nav-container { 
display: none; 
} 

#primary-nav-link-container { 
display: block; 
} 

} 

Answer 1

후에 나는 그렇게처럼 내 헤더를 표시하여 이것을 figuerd.

Answer 2

는 아래의 게시물을 확인하시기 바랍니다. 모든 탐색 메뉴에 대한 Responsive Nav

은이 게시물에서 언급된다.

<div class="headerarea"> 

      <div id="primary-nav-link-container"> 
       <a id="primary-nav-link" href="#primary-nav-container"> <i class="fa fa-bars"></i> Menu</a>      
        <div id="primary-nav-container"> 
         <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu')); ?> 
         <?php get_search_form(); ?>       
        </div> 
      </div>   

        <div id="menu">     
          <?php wp_nav_menu(array('sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu')); ?> 
        </div>    


      </div> 

을하고 그에 따라 CSS를 조정 : 사람이 같은 문제가있는 경우