Don't want Responsive Menu for custom menu

[genunlimited]

I have a custom menu in my site top section and I don’t want it to be responsive. I’m using it for cart and checkout. Is there a way to make just that menu non-responsive?

[Chinmoy Paul]

Remove following JS from global.js file

/* ===================================
  * Responsive Menu   
  * ==================================== */
  $( '.genesis-nav-menu' ).addClass( 'responsive-menu' ); 
  $( "nav .sub-menu" ).before( "<button class='sub-menu-toggle' role='button'></button>" );
  
  $( '.flex-mobile-menu' ).click(function(){
  
    if( $('.dashicons-menu').hasClass('open') ){
       $('.dashicons-menu').removeClass('open').addClass('close');
       $('.nav-primary').addClass('nav-primary-open');
    }else{
      $('.dashicons-menu').removeClass('close').addClass('open');
      $('.nav-primary').removeClass('nav-primary-open');
    }
      
    $('.menu-primary').slideToggle();
    
  });
    
  $('.sub-menu-toggle').on( "click", function() {
    var $this = jQuery( this );       
    $this.toggleClass( "activated" );
    $this.next( ".sub-menu" ).slideToggle();
  });
  
  $( '.nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu' ).before('<div class="responsive-menu-icon"><span>MENU</span></div>');

	$( '.responsive-menu-icon' ).click(function(){
  
    if( $(this).hasClass('close') ){
       $(this).removeClass('close');
    }else{
      $(this).addClass('close');
    }
    
		$(this).next( '.nav-secondary .genesis-nav-menu, .nav-header .genesis-nav-menu' ).slideToggle();
	});
  
	$( window ).resize(function(){
		if ( window.innerWidth > 800 ) {
			$( '.sub-menu,.genesis-nav-menu' ).removeAttr( 'style' );
      $('.responsive-menu-icon, .dashicons-menu').removeClass('close');
		}
	});

[Chinmoy Paul]

Next remove this CSS from style.css file

.genesis-nav-menu.responsive-menu,
    .nav-primary-open.with-nav-extras .nav-primary {
    	float: none;
    	padding-bottom: 4px;
    	width: 100%;
    }
    
    .flex-mobile-menu,
    .genesis-nav-menu.responsive-menu .menu-item,
    .responsive-menu-icon,
    .site-top .top-left,  
    .sub-menu-toggle,
    .sub-menu-toggle:hover {
    	display: block;
    }

    .with-nav-extras .nav-primary {
    	display: block;
    	float: none;
    	width: auto;
    }    
    
    .nav-primary-open {
    	border-bottom: 1px solid #e3e3e3;
    	margin: 0 -30px; 
    	padding: 0 30px;
    }
    
    .nav-secondary .genesis-nav-menu {
    	padding: 0 0 6px;
    }
    
    .genesis-nav-menu.responsive-menu .menu-item {
    	border-bottom: 1px solid #ececec;
    	position: relative; 
    }  
    
    .genesis-nav-menu.responsive-menu .menu-item:last-child {
    	border-bottom: none;
    }

    .genesis-nav-menu.responsive-menu li.current-menu-item > a,
    .genesis-nav-menu.responsive-menu .sub-menu li.current-menu-item > a:hover,
    .genesis-nav-menu.responsive-menu li a,
    .genesis-nav-menu.responsive-menu li a:hover {
      background: none;
      border: none;
      display: block;
      font-weight: 300;
      padding: 10px 0;
      text-transform: none;
    }
    
    .genesis-nav-menu.responsive-menu .sub-menu {
      background-color: rgba(55, 55, 55, .02);
      border-top: 1px solid #ececec;
      padding-left: 15px;
      left: auto;
      opacity: 1;
      position: relative;
      -webkit-transition: opacity .4s ease-in-out;
       -moz-transition: opacity .4s ease-in-out;
        -ms-transition: opacity .4s ease-in-out;
         -o-transition: opacity .4s ease-in-out;	
            transition: opacity .4s ease-in-out;
      width: 100%;
      z-index: 99;
    }

    .genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
    	background-color: transparent;
    	margin: 0;
    	padding-left: 25px;
    }
    
    .genesis-nav-menu.responsive-menu .sub-menu li a,
    .genesis-nav-menu.responsive-menu .sub-menu li a:hover {
      padding: 10px 0;
      position: relative;
      text-transform: none;
      width: 100%;
    }

[genunlimited]

The problem here is that both the site-top and the header menus have the classes .nav-header .genesis-nav-menu. I only want the menu I put in the site-top section to not be responsive so deleting this doesn’t work.

I actually ended up putting a display:none on the .flex-mobile-menu because it simply doesn’t work as a dropdown. If I could somehow get that to work, perhaps I would just put a display none on that header menu on screen sizes under 800px?

Thoughts?

[genunlimited]

I made changes to the global.js file, but I reverted back to the old global.js file which I backed up and saved just in case, but it won’t go back to being a responsive menu now. That’ll teach me. What should I do? the url is newsite.annieshelainghearts.com I’m happy to give you admin access if you need it.

[genunlimited]

Maybe a caching issue… but it all seems to be working ok now? Or at least how it should out of the box. I’m almost afraid to change anything now.

[Author]

Posts