Bourbon Refill Navigation Menu Up Click

Question

I use the Bourbon Refill navigation menu and want to change it, so when the link is clicked in small mode, the menu slides. At the moment, the menu is omitted, but when you click a menu item, the menu remains down. Since I use scrolling on a page with a fixed top menu, this means that a lot of content is hidden behind the menu.

Here is the code on Codepen:

http://codepen.io/mikehdesign/pen/LVjbPv/

My existing code is below:

HTML

<header class="navigation" role="banner"> <div class="navigation-wrapper"> <a href="javascript:void(0)" class="logo"> <img src="https://raw.githubusercontent.com/thoughtbot/refills/master/source/images/placeholder_logo_1_dark.png" alt="Logo Image"> </a> <a href="javascript:void(0)" class="navigation-menu-button" id="js-mobile-menu">Menu</a> <nav role="navigation"> <ul id="js-navigation-menu" class="navigation-menu show"> <li class="nav-link"><a href="javascript:void(0)">About Us</a></li> <li class="nav-link"><a href="javascript:void(0)">Contact</a></li> <li class="nav-link"><a href="javascript:void(0)">Testimonials</a></li> <li class="nav-link"><a href="javascript:void(0)">Sign up</a></li> </ul> </nav> 

SCSS

 .navigation { $large-screen: em(860) !default; $large-screen: $large-screen; // Mobile view .navigation-menu-button { display: block; float: right; margin: 0; padding-top: 0.5em; @include media ($large-screen) { display: none; } } // Nav menu .navigation-wrapper { @include clearfix; position: relative; } .logo { float: left; img { max-height: 2em; padding-right: 1em; } } nav { float: none; @include media ($large-screen) { float: left; line-height: 1.5em; padding-top: 0.3em; } } ul.navigation-menu { clear: both; display: none; margin: 0 auto; overflow: visible; padding: 0; width: 100%; @include media ($large-screen) { display: block; margin: 0; padding: 0; } &.show { display: block; } } // Nav items ul li.nav-link { display: block; text-align: right; width: 100%; @include media ($large-screen) { background: transparent; display: inline; text-decoration: none; width: auto; } } li.nav-link a { display: inline-block; @include media ($large-screen) { padding-right: 1em; } } } 

Js

 $(document).ready(function() { var menuToggle = $('#js-mobile-menu').unbind(); $('#js-navigation-menu').removeClass("show"); menuToggle.on('click', function(e) { e.preventDefault(); $('#js-navigation-menu').slideToggle(function(){ if($('#js-navigation-menu').is(':hidden')) { $('#js-navigation-menu').removeAttr('style'); } }); }); }); 

Help with thanks

Mike

Answer 1

So, I sorted this out by setting whether the menu button was visible, and then using this as a switch in jQuery:

 $(document).ready(function() { var menuToggle = $('#js-mobile-menu').unbind(); $('#js-navigation-menu').removeClass("show"); $('li.nav-link').on('click', function(){ if($(".navigation-menu-button").is(":visible") ) { menuToggle.trigger('click'); } }); menuToggle.on('click', function(e) { e.preventDefault(); $('#js-navigation-menu').slideToggle(function(){ if($('#js-navigation-menu').is(':hidden')) { $('#js-navigation-menu').removeAttr('style'); } }); }); }); 

Answer 2

Check out the following demos that work in small and large versions, as your expectation.

EDIT 2

Updated the transition to a small version according to your requirement.

Codepen

JQuery

 function smallVersion() { $("#js-navigation-menu a").on('click', function(e) { $('#js-navigation-menu').slideToggle(function() { if ($('#js-navigation-menu').is(':hidden')) { $('#js-navigation-menu').removeAttr('style'); } }); }); } function dothis(){ var ww = $(window).width(); var emToPx = 53.75 * parseFloat($("html").css("font-size")); if( ww < emToPx ) { smallVersion(); } } $(document).ready(function() { var menuToggle = $('#js-mobile-menu').unbind(); $('#js-navigation-menu').removeClass("show"); menuToggle.on('click', function(e) { e.preventDefault(); $('#js-navigation-menu').slideToggle(function(){ if($('#js-navigation-menu').is(':hidden')) { $('#js-navigation-menu').removeAttr('style'); } }); }); dothis(); }); 

Answer 3

You can try...

 $('header.navigation').on('click',function(){ $('header.navigation ul.submenu').css('display','none'); }) 

Answer 4

Check the code, hope it helps.

I used matchmedia to check screen resolution. IE 10 and above supports it. You can use matchmedia polyfill https://github.com/paulirish/matchMedia.js/ for IE9 and below.

"min-width: 53.75em" from Refills css after that moment changes to mobile navigation.

 $('li.nav-link').on('click', function(){ if(!window.matchMedia("(min-width: 53.75em)").matches) { menuToggle.trigger('click'); } }) 

http://codepen.io/praveenvijayan/pen/YXrbKB