Announcement

Collapse
No announcement yet.

animated menu from codepen into DWB

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • animated menu from codepen into DWB

    im trying to incorporate some animation into a responsive hamburger menu and found this idea: https://codepen.io/sergioandrade/pen/onkub

    i've tried bringing the elements into DWB but am unable to get it to work. i get lots of errors in my css editor (see image), i can't figure out where to put the html and/or use my wp menu (instead of links as in the codepen html), and with the js, can that be pasted into the js section of the DWB custom options?

    any advice out there for how to go about getting something like this to work in dynamik would be deeply appreciated.

    not much to see just yet, but here's where im working: http://new.design-agency.org/
    site pass: littlegreen

  • #2
    - The CSS in that codepen is SCSS per default and can´t be copy/pasted to Dynamik editor directly. Click on the gear symbol left to the word CSS and set it to display "normal" CSS, then copy that. If that doesn´t work (seems that is the case), you´ll have to manually edit it, especially the nested selectors.
    - Same is true for JS as it won´t work if you want to use jQuery which comes with WordPress. See here, third sample code: https://premium.wpmudev.org/blog/add...ipts-wordpress

    Not sure how to go about that and - honestly - if the UX is worth the time you´ll invest to incorporate it.

    Thoughts: Use "remove" actions for the menu you´d like to use and remove the connected mobile menu as well.
    Then hook the menu back in using your own code for the wrappers. You´ll have to rewrite/adapt the CSS if you want to use Genesis menus. You´ll most likely have to write your own media queries for this to make sense on mobiles.
    Last edited by SiGa; 08-30-2017, 01:04 PM.

    Comment


    • #3
      ah, ok. thanks for the time and the tips—i'll think thru this all a little more and likely do as you suggest.

      Comment

      Working...
      X