Archived topic
Trigger Slideout Menu with secondary button
20 replies · Started by JANEK on August 21, 2018
Good afternoon,
I'm just wondering if theres a capacity to program another button to trigger the slideout menu. At the moment I'm using the slideout menu to to display a contact form and would like to use a button elsewhere on the site to trigger the slideout menu additionally to the primary navigation button.
Thanks in advance,
Janek
Hi there,
you can just wrap an anchor tag with the slideout-toggle class:
<span class="slideout-toggle"><a><!-- slideout toggle --></a></span>
Then this CSS:
.slideout-toggle a:before {
font-family: GeneratePress;
}
Well... that was relatively simple wasn't it. I thought there might have been something else going on in the background. :)
Thanks for your help, David!
glad to be of help :)
Glad i came across this, thanks for posting this.
Just wanted to add to this that the code above can be added to an Elementor Button Module, to get a button to trigger the slideout.
From within the Button Module:
in the link field paste :
<!-- slideout toggle -->
in the class field paste:
slideout-toggle
in the custom css paste:
.slideout-toggle a:before {font-family: GeneratePress;}
Awesome :) thanks for sharing Colby.
Hi, i'm trying to get this working but it doesn't do anything, any ideas?
site: https://www.shensmithlaw.co.uk/ (in the header)
Hi there,
it could be due to the JS not firing, the Ninja form code you have in the section column us showing an error, right click > inspect > console you will see the error. Try removing the ninja form code and see if the menu works.
Hi Been following this thread. Just a quick question. What is this technique called? When you use a HTML comment structure "<!– slideout toggle –>" to invoke a JS interaction?
I'd like to read up on this and learn how this works but don't know what to search for. Any infor woudl be appreciated, thanks!
Hi there,
so this is the HTML element:
<span class="slideout-toggle"><a><!-- slideout toggle --></a></span>
The Javascript looks for an <a> tag that is within a container carrying the slideout-toggle class. The HTML comment is solely there as a filler and to identify its purpose for anyone looking over the code.
Ok, Gotcha. Thanks David.
You're welcome
I removed it, but still doesn't seem to fire the menu for some reason!
Do you have the slideout navigation set to mobile only?
D'oh! I didn't know that was an option! Thanks