[Solved] Off Canvas Menu-Header Not Showing

[wolfgang1983]

Got issue with my off canvas responsive. When it reaches my breakpoints of 959px my menu header will not show its background?

And also my toggle not working also?

http://codepen.io/riwakawebsitedesigns/pen/zdEIK

[Paulie_D]

The toggle isn’t working, I suspect, because you do not have an .active class defined for #menu in your CSS.

Also, you should be Preventing default (I think) since a link is being clicked..especially as it doesn’t actually go anywhere.

I think there is an argument for that not to be an ‘anchor’ at all, a span might be better.

[wolfgang1983]

I add the menu active with transitions in the media query but still nothing very strange clicking works though but not showing menu and should be coming from left but coming from right?

http://codepen.io/riwakawebsitedesigns/pen/zdEIK

[Paulie_D]

I think you are confused about what it is the .active classes are supposed be to doing.

For instance, why are you adding an .active class to the .container? All it does is move the container and I can’t see any reason for that.

On adding the ‘active’ class to the #menu shouldn’t it display the full menu…all you seem to be doing is using translate when, I think you should be changing the position values.

I would forget about the JS/JQ for now and concentrate on getting the design right at various widths. How the changes are applied is secondary.

[wolfgang1983]

I worked it out now you can look at it took me a while to make my own but did it.

[wolfgang1983]

Now just have to work it out how to make it come from the left just shows up blank when I change it to left in mobile view

[Paulie_D]

A quick start..http://codepen.io/Paulie-D/pen/jlICc

[wolfgang1983]

Thanks @Paulie_D Will have to practice some more I think. Been trying to do what you told me last time about position etc. Will also convert it into scss which I am learning. Just set up ruby and compass for foundation 5.

[Paulie_D]

You might want to reconsider the SO question in light of our discussions.

[Paulie_D]

Stack Overflow

[Paulie_D]

Ah…OK.

No hassle just a friendly note. :)

[Paulie_D]

@riwakard

This might interest you: http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5–webdesign-17767

[Author]

Posts