[Resolved] Responsive menu and anchor links

[David]

Tom, I’ve started a new thread for this.

I purchased GP Premium solely for what I presumed would be an out-of-the-box responsive menu that worked with one-page websites. Nothing fancy. Desktop menu, mobile menu, click to scroll to an anchor.

Considering the popularity of one-page websites, and considering that most WordPress users are not prepared to work with PHP, what is the intended functionality of your responsive menu when used in conjunction with anchors on one-page websites? To remain open, or close?

Please don’t point me toward an article with a PHP-based solution. I don’t want to touch PHP. I’d like an out-of-the-box responsive solution that works for one-page websites, and it’s surprisingly difficult to find one that works well. I have no idea why.

If GP Premium doesn’t provide a simple, flexible responsive menu, please let me know.

Thanks, David.

[Tom]

Hi there,

I like to think the mobile menu in GP is flexible and simple – it’s definitely responsive.

It isn’t built to work with one page websites by default. That doesn’t mean it can’t happen, it just means it’s geared more towards normal websites.

To keep the theme light, I try my best to only add code that’s necessary for everyone. Not everyone has one page websites (in fact, a very small percentage do). That’s why we’re so open here when it comes to providing code – everyone has different needs, and we’re happy to help when those needs arise.

It’s possible to close the mobile menu on click, you just need to be willing to paste some code into an area in GP Hooks. No need to write your own code at all.

If you’d like some help with that, definitely let me know 🙂

[David]

Functionality aside, your customer service is excellent. A+.

BTW, this is the third product I’ve purchased attempting to find a turn-key solution for a responsive menu that handles anchors. It’s very frustrating. It seems like such an obvious, innocent requirement.

So, yes, I definitively need your help. Do you mind to login as admin and make it happen? I provided the login information on the other thread. If not, I guess I surrender.

Thanks, David.

[Tom]

Thanks, I appreciate that!

You’ll definitely have a hard time finding a theme that does everything you want straight out the box. That’s why support is so important so you can get help when you need to tweak something.

Logging in and actually making changes is against policy in these forums for a number of reasons. I’m way more inclined to help people learn to do things themselves anyways.

So here’s what you want to do – it’s not that hard, just take it step by step:

1. Copy this block of text exactly:

<script>
jQuery( document ).ready( function( $ ) {
      $( document ).on( 'click', '.main-nav li > a:first-child', function( e ) {
		var mobile = $( '.menu-toggle' );
		if ( mobile.is( ':visible' ) ) {
			$( '.menu-toggle').closest( '.main-navigation' ).removeClass( 'toggled' );
			$( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded', $( '.menu-toggle').closest( '.main-navigation' ).attr( 'aria-expanded' ) === 'true' ? 'false' : 'true' );
			$( '.menu-toggle').removeClass( 'toggled' );
			$( '.menu-toggle').children( 'i' ).addClass( 'fa-bars' ).removeClass( 'fa-close' );
			$( '.menu-toggle').attr( 'aria-expanded', $( this ).attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
		}
    });
});
</script>

You don’t have to make any changes to it at all, simply copy it.

2. Now, go to “Appearance > GP Hooks” (make sure it’s activated in Appearance > GeneratePress) and paste the code into the wp_footer hook (at the very bottom).

Save, and you’re done.

Let me know if that works or not – if you try and can’t get it to work, I’ll definitely log in to see exactly what went wrong and will be happy to guide you 🙂

[David]

Nope, and I swear on a stack of Bibles that I’m following your instructions.

[David]

If you’re so inclined to login and fix it, please do. Change tom’s password when you are finished.

It’s just a sandbox website for now.

I appreciate your time.

d.

[Tom]

Aha, you’re using the slide-out navigation, sorry about that!

Try this code in the wp_footer hook instead:

<script>
jQuery( document ).ready( function( $ ) {
    var settings = {
        animation_duration: false,
        place: "left",
        animation_curve: false,
        body_slide: false,
        no_scroll: false,
    };
    $( '.slideout-navigation a' ).on( 'click', function( event ) {
        $('.slideout-navigation').sliiide( settings ).deactivate();
        $( '.menu-toggle.opened' ).removeClass( 'opened' );
        $( '.slideout-toggle.opened' ).removeClass( 'opened' );
        $( 'body, html' ).removeClass( 'slide-opened' );
        $( '.slideout-overlay' ).hide();
        $( '.slideout-toggle' ).removeClass( 'sfHover' );
        $( document ).off( 'touchmove' );
        $( 'body' ).off( 'touchmove touchstart', '.slideout-navigation' );
    });
});
</script>

[David]

My hero, indeed. I will dance at your wedding and weep at your funeral.

To other readers: It’s worth going Premium for the customer service alone.

Regards, David

[Kurt]

Hi, I’m trying to follow this recommendation, but GP Hooks are gone and Elements are now used. I tried creating an Element for this but it’s not fixing the problem. My responsive menu smooth scrolls to all the wrong places. How would I create an element to solve this problem?

Thank you!
Kurt

[Tom]

The slideout navigation (and regular mobile menu) should close on click by default now if you’re using the latest versions 🙂

[Author]

Posts