Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › [Solved] Off Canvas Menu-Header Not Showing

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • March 3, 2014 at 12:21 am #164532
    wolfgang1983
    Participant

    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

    March 3, 2014 at 4:45 am #164542
    Paulie_D
    Member

    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.

    March 3, 2014 at 7:29 am #164550
    wolfgang1983
    Participant

    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

    March 3, 2014 at 8:07 am #164552
    Paulie_D
    Member

    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.

    March 3, 2014 at 8:21 am #164553
    wolfgang1983
    Participant

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

    March 3, 2014 at 8:31 am #164555
    wolfgang1983
    Participant

    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

    March 3, 2014 at 8:57 am #164557
    Paulie_D
    Member

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

    March 3, 2014 at 9:18 am #164558
    wolfgang1983
    Participant

    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.

    March 3, 2014 at 10:03 am #164560
    Paulie_D
    Member

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

    March 4, 2014 at 12:23 am #164619
    Paulie_D
    Member

    Stack Overflow

    March 4, 2014 at 2:36 am #164623
    Paulie_D
    Member

    Ah…OK.

    No hassle just a friendly note. :)

    March 5, 2014 at 2:43 am #164742
    Paulie_D
    Member

    @riwakard

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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.