• Home
  • Blog
  • Showcase
  • Setup Docs
    • Sunshine Help
    • Flex Help
  • Support
    • Support Area
    • Contact us
    • Feedback
  • Connect
    • Newsletter
    • Twitter
    • Facebook
  • My Account
  • Flex
  • Sunshine
Support : Simple Pro Themes

Support : Simple Pro Themes

[Support request] Don't want Responsive Menu for custom menu

If you have purchased a product, please enter the email address that you used to register at time of purchase.
Log In
Lost Password

Create an Account
  • Your username must be unique, and cannot be changed later.
  • We use your email address to email you a secure password and verify your account.

Support › Forums › Flex Theme › Don't want Responsive Menu for custom menu

  • This topic has 5 replies, 2 voices, and was last updated 4 years, 2 months ago by genunlimited.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • November 11, 2016 at 12:04 am #1453
    genunlimited
    Participant

    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?

    November 14, 2016 at 5:14 am #1459
    Chinmoy Paul
    Moderator

    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');
    		}
    	});
    November 14, 2016 at 5:16 am #1460
    Chinmoy Paul
    Moderator

    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%;
        }
    November 16, 2016 at 7:30 pm #1468
    genunlimited
    Participant

    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?

    November 16, 2016 at 8:00 pm #1469
    genunlimited
    Participant

    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.

    November 16, 2016 at 10:26 pm #1470
    genunlimited
    Participant

    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
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.
Log In

Copyright © 2021 · Simple PRO Themes for Genesis Framework · About · FAQs · Contact · Affiliates