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.
-
AuthorPosts
-
November 11, 2016 at 12:04 am #1453
genunlimited
ParticipantI 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 #1459Chinmoy Paul
ModeratorRemove 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 #1460Chinmoy Paul
ModeratorNext 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 #1468genunlimited
ParticipantThe 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 #1469genunlimited
ParticipantI 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 #1470genunlimited
ParticipantMaybe 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.
-
AuthorPosts
- You must be logged in to reply to this topic.