slidetoggle - jQuery Toggle for Mobile Menu -


i'm using mobile menu toggles open on screen width of less 768px toggle on screen width higher 769. did change operator < 769 doesn't work.

jquery(function( $ ){      $(".nav-primary .main-nav-menu").addclass("responsive-menu").before('<div class="responsive-menu-icon"></div>');      $(".responsive-menu-icon").click(function(){         $(this).next(".nav-primary .main-nav-menu").slidetoggle();     });      $(window).resize(function(){         if(window.innerwidth > 768) {             $(".nav-primary .main-nav-menu, .nav-primary .sub-menu").removeattr("style");             $(".responsive-menu > .menu-item").removeclass("menu-open");         }     });      $(".responsive-menu > .menu-item").click(function(event){         if (event.target !== this)         return;             $(this).find(".sub-menu:first").slidetoggle(function() {             $(this).parent().toggleclass("menu-open");         });     });  }); 

and css

@media screen , (min-width: 769px) {      .title-area {         float: none;         padding-bottom: 0;     }      .header-image .title-area {         padding-bottom: 10px;     }      .header-image .site-title > a,     .header-image .title-area,     .site-container,     .site-header,     .site-header .widget-area,     .title-area {         width: 100%     }      .main-nav-menu,     .site-header,     .site-header .widget-area,     .title-area {         text-align: center;     }      .main-nav-menu {         padding-right: 0;     }      .nav-primary {         float: none;     }      .site-title {         margin-bottom: 10px;     }      .entry-comments-link,     .main-nav-menu.responsive-menu,     .main-nav-menu.responsive-menu > .menu-item > .sub-menu {         display: none;     }      .main-nav-menu.responsive-menu .menu-item,     .responsive-menu-icon {         display: block;     }      .nav-primary .main-nav-menu.responsive-menu {         padding-bottom: 10px;     }      .main-nav-menu.responsive-menu .menu-item:hover {         position: static;     }      .main-nav-menu.responsive-menu a,     .main-nav-menu.responsive-menu a:hover,     .main-nav-menu.responsive-menu .current-menu-item > {         background: none;         display: block;         line-height: 1;         padding: 16px 20px;         text-align: left;     }      .main-nav-menu.responsive-menu .menu-item-has-children {         cursor: pointer;         }      .main-nav-menu.responsive-menu .menu-item-has-children > {         margin-right: 60px;     }      .main-nav-menu.responsive-menu > .menu-item-has-children:before {         content: "\f347";         float: right;         font: normal 16px/1 'dashicons';         height: 16px;         padding: 15px 20px;         right: 0;         text-align: right;         z-index: 9999;     }      .main-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {         content: "\f343";     }      .main-nav-menu.responsive-menu .sub-menu {         background-color: rgba(255, 255, 255, 0.1);         left: auto;         margin: 0;         opacity: 1;         position: relative;         -moz-transition:    opacity .4s ease-in-out;         -ms-transition:     opacity .4s ease-in-out;         -o-transition:      opacity .4s ease-in-out;         -webkit-transition: opacity .4s ease-in-out;         transition:         opacity .4s ease-in-out;         width: 100%;         z-index: 99;     }      .main-nav-menu.responsive-menu .sub-menu .sub-menu {         background-color: transparent;         margin: 0;         padding-left: 25px;     }      .main-nav-menu.responsive-menu .sub-menu li a,     .main-nav-menu.responsive-menu .sub-menu li a:hover {         padding: 16px 20px;         position: relative;         text-transform: none;         width: 100%;     }  } 


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -