Streaming live at 10am (PST)

Creating offcanvas Nav bar


#1

Hi Guys,

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.

I have a 2 divs within my body
1. Nav bar (15% canvas)
2. Main container (85% canvas)

My read only is: https://preview.webflow.com/preview/inkfndry?preview=26bcfd6d07cd5a400b5b3f8d2e097811

(the page im working on is "artist dash")

I have tried, but getting confused, any help would be great!!


Here is my public share link: LINK
(how to access public share link)


#3

I have created my nav bar although i cant seem to see why i have some white space on the left when i open the nav...

I have used some jquery here to create a function, but i think this is solely a design issue.

live link http://inkfndry.webflow.io/artist-dashboard/artist-dash
preview: see above


#4

Try changing the "nav" class to left: -29% and width: 29%

See how it goes . Hope this helps. Cheers!


#5

Thanks @textileranch, however this could be just a temporary fix... I want my nav to be 20% of the canvas and it moved -20% to hide, which i have done.

But i am still getting the white space. Just thinking how it can be more of a permanant solution.

@DFink this is what i tagged you in before, as i saw you used a similar method.

Thanks guys for your help1!!!


#6

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.


#7

Hey @DFink

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.

But this seems a purely design problem


#8

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.


#10

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.