CODEWITHSUNDEEP
jquerywordpressjquery-pluginssidr
loki
loki

Reputation: 3

Sidr Navigation is not working in Wordpress

I try to make this site responsible. For this task I was trying to get the sidr plugin to work. But nothing happen :(. Can someone help me to find the issue?

my functions.php:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js", false, null);
   wp_enqueue_script('jquery');  
}

function lbg_enqueue_scripts() {
    wp_enqueue_style( 'lbg_style', get_template_directory_uri() . '/lbg_css.css' );
    wp_enqueue_style( 'sidr_style', get_template_directory_uri() . '/css/jquery.sidr.dark.css' );

    wp_register_script( 'sidr', get_template_directory_uri() . '/js/jquery.sidr.min.js' , array( 'jquery' ), '1.0', false );
    wp_register_script( 'js', get_template_directory_uri() . '/js/js.js' , array( 'jquery' ), '1.0', false );

    wp_enqueue_script( 'sidr' );
    wp_enqueue_script( 'js' );
}
add_action( 'wp_enqueue_scripts', 'lbg_enqueue_scripts' );

function viewport_meta() {
    ?>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <?php
}
add_filter('wp_head', 'viewport_meta');

my header.php:

<div id="page">
  <div id="header">
      <div id="mainpic"></div>
      <div id="mobile-header">
        <a id="responsive-menu-button" >Menu</a>
      </div>
      <div id="mynavigation">
        <nav class="nav">
            <ul id="pagetabs">
                <?php wp_list_pages('exclude=13&sort_column=post_date&title_li='); ?>
            </ul>
        </nav>
      </div>
  </div>

my js.js:

jQuery(document).ready(function(){

      $('#responsive-menu-button').sidr({
        name: 'sidr-main',
        source: '#mynavigation'
        });
    })

my lbg_css.css:

#mobile-header {
    display: none;
}

@media only screen and (max-width: 767px){
    #mobile-header {
        display: block;
    }

    #page {
            text-align: right;
    }
}

I really don't know what to do yet? For my understanding this is the way to get it to work...but nope, the menu does not change when the window resizes, just the text-align (for test).

Please help!

Many thanks, Jan from germany!

Upvotes: 0

Views: 1110

Answers (1)

David
David

Reputation: 5937

you are going to have a few issues integrating this to wordpress. Wordpress runs in no conflict mode so to start:

jQuery(document).ready(function(){

  jQuery('#responsive-menu-button').sidr({
    name: 'sidr-main',
    source: '#mynavigation'
    });
})

next check the console (google chrome right click and inspect element, see console? thats were js errors appear). Work through the issues as you find them.

Upvotes: 1

Related Questions