[Resolved] Off Canvas Panel – Working with anchor links

[FunkyCss]

Hallo, i am going to use Generatepress for a one page website and i would like to ask if there is any tip to make the off canvas panel like a sticky navigation for the sections inside the page.

I have made off canvas sticky and i have set my links for the sections and is working smoothly.

But what i need to do is the off canvas to stay opened so it works like a navigation that moment on pc, i need only to be closed when i click the x button actually.

Any recomendations to start doing that ?

[Elvin]

Hi,

I’m not sure I understand what you mean. Off-canvas menu stays open when you open it as long as you don’t close it or you go to another page.

To clarify: you want the off-canvas menu to stay open when you browse through other pages?

Unfortunately this isn’t possible without significant site customization and this kind of customization is out of our scope.

But to give you clues as to what you may need, search for AJAX navigation.

[FunkyCss]

Hi thanks for the feedback, i actually dont need the off canvas to stay open on other pages.

I am creating a one page site where i need the off canvas as my menu with inside the anchor links not pages.

Like the link i provide down

Where i dont want an overlay on the opening of canvas, i want the off canvas to stay open as you click on the anchor links an navigate throu the page.

is possible ?

[Tom]

This goes against how it’s built to work, but you could try adding some javascript like this:

var slideoutLinks = document.querySelectorAll( '.slideout-navigation ul a' );

for ( var i = 0; i < slideoutLinks.length; i++ ) {
	slideoutLinks[i].removeEventListener( 'click', 'closeOffsideOnAction', false );
};

Let me know 🙂

[FunkyCss]

Hallo Tom thank you so much for your nice code, i made a hook in entire page, at the end of the wp footer but it looks like is not working , when i click it it will close unfortunetaly , did i miss something ?

on the console – > closeOffsideOnAction is not defined slideoutLinks.removeEventListener( 'click', <strong>closeOffsideOnAction</strong>, false );

[Tom]

Can you try the updated code above and increase the priority of the hook to something like 100?

[FunkyCss]

Hi TOM , this still will not work , but i find it more easy to create a custom header as the project needs more things on this one and i dont want to be a weight here on forum asking for this kind of support.

Once again thank you so much for the guide, also Elvin for recomending Ajax Nav , that is a nice idea that i have already managed to create in onother project!

[Tom]

Sounds good! Thank you 🙂

[Author]

Posts