ワードプレスサイトにハンバーガーメニューを含む

http://thehamburgercollection.com/shop/ < <ここにウェブサイトがあります。ワードプレスサイトにハンバーガーメニューを含む

ハンバーガーメニューを作成しようとしています（たとえば、タブレットとモバイルのサイズのthisの例のように）。

現在、私のメニューは私のワードプレスのテーマでfooter.phpである：あなたが見ることができるように、メニューは、ホームページに表示することはできません

<?php 

if (! is_front_page() && ! is_home()) { 
    wp_nav_menu(); 
} 
?>

。

this tutorial後、私はこのようなwp_nav_menu（）関数の周りのdivをラップしようとした：

<div class="mobile-nav"> 

    <div class="menu-btn" id="menu-btn"> 
     <div></div> 
     <span></span> 
     <span></span> 
     <span></span> 
    </div> 

    <div class="responsive-menu"> 

    <?php 

    if (! is_front_page() && ! is_home()) { 
     wp_nav_menu(); 
    } 
    ?> 

    </div> 

</div>

私は、コピーしてnavigation.jsと呼ばれるJSファイルにjQueryのコードを貼り付け、そのファイルが含まれてfunctions.php

<?php 
    wp_enqueue_script('wpb_togglemenu', 
    get_template_directory_uri() . '/js/navigation.js', 
    array('jquery'), 
    '20160909', true);

また、私のstyle.cssファイルにCSSコードをコピーして貼り付けました。私が何かが欠落していない限り、私はチュートリアルが言ったことを正確に行いましたが、まだ結果が得られていません。チュートリアルがうまくいかない理由や、私が探している特定のハンバーガーメニューを作成するための他の提案があれば、どんなアイディアですか？

出典

2016-11-23 Sean

私が見ている2つの大きな問題（簡単には改善されている）があります。

1）style.cssの350行目にタイプミスがあります。「幅」のスペルを修正すると、ハンバーガーボタンがタブレットの解像度より下に表示されます。

@media screen and (max-wdith: 768px) {

2）あなたのnavigation.jsはそれを無効JSファイルを作成し、実行することを妨げる、それにHTMLを持っています。 <script type="text/javascript">タグと</script>タグをすべてファイルから削除する必要があります。これらのタグはHTMLドキュメントでスクリプトを含めるためにのみ使用されますが、スクリプトファイル内には使用されません。

出典

2016-11-23 01:20:16

あなたは正しく、タイプミスを修正してアイコンを表示させ、

ワードプレスサイトにハンバーガーメニューを含む

答えて

関連する問題