I have my nav bar setup with in set on canvas… however i dont want the info covered up and on mobile it looks really squished, I want to make it off-canvas. What is the best way to do this.
Yeah, i have no idea whats going on with that interaction. Super sluggish for me, pretty much unusable from a UX standpoint. I can’t even get it to open in the editor so it’s hard for me to troubleshoot it. It doesn’t even look like you’ve assigned anything to the button in the interaction other than the bubble look thing. I can’t recreate what you are seeing in your preview.
Sorry i forgot to add i have added some jquery for the toggle nav
$(function() { $('.toggle-nav').click(function() { }); }); // The toggleNav function itself function toggleNavigation() { if ($('#container').hasClass('display-nav')) { // Close Nav $('#container').removeClass('display-nav'); } else { // Open Nav $('#container').addClass('display-nav'); }
The only interaction is the hamburger, there is no interaction for the off canvas nav at all.
that code isn’t really necessary. You can do what you are trying to do with interactions and have a lot more control. I did a similar thing on www.canalalarm.com The entire nav is custom built with divs and interactions and no custom code.