Need to close mobile menu on click for anchor links

Shapely
1

I have a site that uses anchor links to scroll to different sections of the home page (I am using Easy Smooth Scroll Links plugin). On smaller screens, like my phone, I need the menu to close when clicked - when it stays open it hides the content of the anchor link. I have tried adding this snippet to the footer- it works on other bootstrap sites, but not with Shapely.

<script>
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && ( $(e.target).attr('class') != 'dropdown-toggle' ) ) 
{
$(this).collapse('hide');
}
});
</script>

I really need to make this happen- any help is greatly appreciated. my staging site is http://70a.4db.myftpupload.com

2

hi @tmgdesigns,

This falls out from the free support and more in to custom development.

Thank you,

Cristian

3

Thanks for the response, but I’m really sorry you feel that way and I beg to disagree. Shapely specifically lists itself as a one page theme, and it would be a terrific choice for that except for this bug. It seems to me that it’s a much more universal issue than just something custom for my site. Every user who tries to use Shapely for a one page site will have this same problem- having your menu block your content on a mobile device is big problem. Unfortunately, Since Shapely specifically advertises itself as a one-pager, I made the assumption that basic issues like this would be dealt with and I am now too far into my site build to change themes without a huge hassle. I will have to try and figure this out somehow and would have really appreciated your help.

4

If you truly have only one page and all of your menu links start with #, the mobile menu will close on click, but if you have a one page style homepage and use separate pages for your portfolio or blog or individual items, you will have to make your links absolute ( http://mysite#about instead of just #about) so your menu will work from the inner pages as well. When you do this, the mobile menu will no longer close when clicked.

I think I finally figured out a solution. First, make sure you are working with a child theme.
Add the following code (from the WP Codex) to your functions.php file- this will add a class directly to the a element in the primary Wordpress menu only:


function add_specific_menu_location_atts( $atts, $item, $args ) {
    // check if the item is in the primary menu
    if( $args->theme_location == 'primary' ) {
      // add the desired attributes:
      $atts['class'] = 'menu-link-class';
    }
    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_specific_menu_location_atts', 10, 3 );

Then add the following code to your footer.php file:


jQuery(document).ready(function($) {
 $('.menu li a').click(function() {
        if ($(this).hasClass('menu-link-class')){
            $(this).closest('.nav-bar').removeClass('nav-open');
        }
    });
});

You can change ‘menu-link-class’ to whatever you want - just make sure it is the same in both bits of code.
The menu will now close when clicked in a mobile device.

5

Hi @tmgdesigns,

Thank you for your great contribution to this forum.

Best regards,

Cristian

6

Bug Fix- I didn’t account for dropdown menus. I changed the footer code to:


jQuery(document).ready(function($) {
 $('.menu li a').click(function() {
        if ( ($(this).hasClass('menu-link-class')) && (!$(this).parent().hasClass('dropdown'))){
            $(this).closest('.nav-bar').removeClass('nav-open');
        }
    });
});

That seems to do the trick, though I’ve only been able to test the mobile actions on Android…