This tutorial provides the steps to set up a mobile responsive menu in Oxygen’s header using Burger Trigger and Slide Menu components of OxyExtras.
Step 1
If you have not already, enable Burger Trigger and Slide Menu components in OxyExtras’ settings.
Step 2
Edit your site wide Main catch all template with Oxygen.
Manual setup instructions follow. 1-click paste codes are provided near the end.
Add a Header Builder component if there’s not one already.
Add a Header Row with your logo at the left and Menu component at the right, if not already present.
Add a Burger Trigger component in Row Right below the Menu.
Burger Scale: 0.7.
Since we want this to only appear at a lower breakpoint, set its display to none (Advanced > Layout).
Decide on the breakpoint at which you would like the (expanded) menu to collapse to a hamburger. Let’s say it is 1120px. Switch to this breakpoint and set the display of Menu to none and display of Burger Trigger to block.
Add another Header Row and add a Slide Menu component in the center row. Select your menu if you have multiple. Set width to 100%.
Settings from the demo site:
1120px breakpoint:
Set “State on page load” to Hidden.
That’s it!
If you would like to paste the entire pre-built Header Builder from the demo site, install Hydrogen Pack or Hydrogen Paste, copy the code below and paste in your Template.
eyJzb3VyY2UiOiJodHRwczovL3NsaWRlbWVudS53cGRlbW8uZGV2IiwiY29tcG9uZW50IjpbeyJpZCI6MiwibmFtZSI6Im94eV9oZWFkZXIiLCJvcHRpb25zIjp7ImN0X2lkIjoyLCJjdF9wYXJlbnQiOjAsInNlbGVjdG9yIjoiX2hlYWRlci0yLTIyNSIsIm9yaWdpbmFsIjp7InN0aWNreS1tZWRpYSI6InBhZ2Utd2lkdGgiLCJzdGlja3lfc2Nyb2xsX2Rpc3RhbmNlIjoiMzAwIiwicGFkZGluZy10b3AiOiIxMCIsInBhZGRpbmctYm90dG9tIjoiMTAiLCJib3JkZXItdG9wLXdpZHRoLXVuaXQiOiIiLCJib3JkZXItcmlnaHQtd2lkdGgtdW5pdCI6IiIsImJvcmRlci1sZWZ0LXdpZHRoLXVuaXQiOiIiLCJib3JkZXItdG9wLXdpZHRoIjoiMCIsImJvcmRlci1yaWdodC13aWR0aCI6IjAiLCJib3JkZXItYm90dG9tLXdpZHRoIjoiMSIsImJvcmRlci1sZWZ0LXdpZHRoIjoiMCIsImJvcmRlci1ib3R0b20tY29sb3IiOiIjZGRkIiwiYm9yZGVyLWJvdHRvbS1zdHlsZSI6InNvbGlkIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwibmljZW5hbWUiOiJIZWFkZXIgd2l0aCBUb3AgTGluZSIsIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsicGFkZGluZy10b3AiOiIxOCIsInBhZGRpbmctYm90dG9tIjoiMTgifX19fSwiY2hpbGRyZW4iOlt7ImlkIjoxMCwibmFtZSI6Im94eV9oZWFkZXJfcm93Iiwib3B0aW9ucyI6eyJjdF9pZCI6MTAsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJfaGVhZGVyX3Jvdy0xMC0yMjUiLCJvcmlnaW5hbCI6eyJzdGFjay1oZWFkZXItdmVydGljYWxseSI6InBob25lLXBvcnRyYWl0In19LCJjaGlsZHJlbiI6W3siaWQiOjExLCJuYW1lIjoib3h5X2hlYWRlcl9sZWZ0Iiwib3B0aW9ucyI6eyJjdF9pZCI6MTEsImN0X3BhcmVudCI6MTAsInNlbGVjdG9yIjoiX2hlYWRlcl9sZWZ0LTExLTIyNSJ9LCJjaGlsZHJlbiI6W3siaWQiOjEyLCJuYW1lIjoiY3RfbGluayIsIm9wdGlvbnMiOnsiY3RfaWQiOjEyLCJjdF9wYXJlbnQiOjExLCJzZWxlY3RvciI6ImxpbmstMTItMjI1IiwiY2xhc3NlcyI6WyJhdG9taWMtbG9nbyJdLCJvcmlnaW5hbCI6eyJ1cmwiOiIvIiwidXJsX2VuY29kZWQiOiJ0cnVlIn0sIm1lZGlhIjp7InBob25lLWxhbmRzY2FwZSI6eyJvcmlnaW5hbCI6eyJtYXJnaW4tdG9wIjoiMTIiLCJtYXJnaW4tYm90dG9tIjoiMjQifX19LCJhY3RpdmVzZWxlY3RvciI6ImF0b21pYy1sb2dvIn0sImNoaWxkcmVuIjpbeyJpZCI6MTMsIm5hbWUiOiJjdF9pbWFnZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjEzLCJjdF9wYXJlbnQiOjEyLCJzZWxlY3RvciI6ImltYWdlLTEzLTIyNSIsIm9yaWdpbmFsIjp7InNyYyI6Imh0dHBzOi8vYXRvbWljLm94eS5ob3N0L3dwLWNvbnRlbnQvdXBsb2Fkcy9zaXRlcy80MS8yMDE4LzAzL294eWdlbi1sb2dvLWJsdWUucG5nIiwiaGVpZ2h0IjoiMzAifSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOiIyIn1dLCJkZXB0aCI6MX0seyJpZCI6MTQsIm5hbWUiOiJveHlfaGVhZGVyX2NlbnRlciIsIm9wdGlvbnMiOnsiY3RfaWQiOjE0LCJjdF9wYXJlbnQiOjEwLCJzZWxlY3RvciI6Il9oZWFkZXJfY2VudGVyLTE0LTIyNSIsImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjF9LHsiaWQiOjE1LCJuYW1lIjoib3h5X2hlYWRlcl9yaWdodCIsIm9wdGlvbnMiOnsiY3RfaWQiOjE1LCJjdF9wYXJlbnQiOjEwLCJzZWxlY3RvciI6Il9oZWFkZXJfcmlnaHQtMTUtMjI1In0sImNoaWxkcmVuIjpbeyJpZCI6MTcsIm5hbWUiOiJveHlfbmF2X21lbnUiLCJvcHRpb25zIjp7ImN0X2lkIjoxNywiY3RfcGFyZW50IjoxNSwic2VsZWN0b3IiOiJfbmF2X21lbnUtMTctMjI1Iiwib3JpZ2luYWwiOnsibWVudV9yZXNwb25zaXZlIjoicGFnZS13aWR0aCIsIm1lbnVfcmVzcG9uc2l2ZV9wYWRkaW5nX3NpemUiOiIwIiwibWVudV9yZXNwb25zaXZlX2ljb25fc2l6ZSI6IjI0IiwiZHJvcGRvd25zIjoib24iLCJtZW51X2Ryb3Bkb3duX2Fycm93Ijoib24iLCJtZW51X2lkIjoiMyIsIm1lbnVfY29sb3IiOiJjb2xvcigzKSIsIm1lbnVfZm9udC1zaXplIjoiMTYiLCJtZW51X2ZvbnQtd2VpZ2h0IjoiNTAwIiwibWVudV9sZXR0ZXItc3BhY2luZyI6IjEiLCJtZW51X3RleHQtdHJhbnNmb3JtIjoidXBwZXJjYXNlIiwibWVudV9wYWRkaW5nLXRvcCI6IjIwIiwibWVudV9wYWRkaW5nLWJvdHRvbSI6IjIwIiwibWVudV9wYWRkaW5nLWxlZnQiOiIyMCIsIm1lbnVfcGFkZGluZy1yaWdodCI6IjIwIiwibWVudV9ob3Zlcl9iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMykiLCJtZW51X2FjdGl2ZV9ib3JkZXItYm90dG9tLXdpZHRoIjoiMiIsIm1lbnVfZHJvcGRvd25zX2hvdmVyX2JhY2tncm91bmQtY29sb3IiOiJjb2xvcigyKSIsIm1lbnVfZHJvcGRvd25zX2hvdmVyX2NvbG9yIjoiY29sb3IoMSkiLCJtZW51X3Jlc3BvbnNpdmVfZHJvcGRvd25zIjoib2ZmIiwibWVudV9ob3Zlcl9jb2xvciI6ImNvbG9yKDEpIiwibWVudV9ob3Zlcl9ib3JkZXItYm90dG9tLXdpZHRoIjoiMCIsIm1lbnVfanVzdGlmeS1jb250ZW50IjoiZmxleC1zdGFydCIsIm1lbnVfLXdlYmtpdC1mb250LXNtb290aGluZyI6ImFudGlhbGlhc2VkIiwibWVudV9hY3RpdmVfY29sb3IiOiJjb2xvcigyKSIsIm1lbnVfZHJvcGRvd25zX3BhZGRpbmctdG9wIjoiMTYiLCJtZW51X2Ryb3Bkb3duc19wYWRkaW5nLWJvdHRvbSI6IjE2IiwibWVudV9yZXNwb25zaXZlX2ljb25fY29sb3IiOiJjb2xvcigzKSIsIm1lbnVfcmVzcG9uc2l2ZV9pY29uX2hvdmVyX2NvbG9yIjoiY29sb3IoNikiLCJtZW51X3Jlc3BvbnNpdmVfbGlua19jb2xvciI6ImNvbG9yKDMpIiwibWVudV9yZXNwb25zaXZlX2hvdmVyX2xpbmtfY29sb3IiOiJjb2xvcig2KSIsIm1lbnVfcmVzcG9uc2l2ZV9wYWRkaW5nX3RvcCI6IjEyIiwibWVudV9yZXNwb25zaXZlX3BhZGRpbmdfYm90dG9tIjoiMTIifSwiY3RfbmF2X21lbnUiOiJ0cnVlIiwiaG92ZXIiOnsibWVudV9iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMykiLCJtZW51X2Ryb3Bkb3duc19iYWNrZ3JvdW5kLWNvbG9yIjoiY29sb3IoMikiLCJtZW51X2Ryb3Bkb3duc19jb2xvciI6ImNvbG9yKDEpIiwibWVudV9jb2xvciI6ImNvbG9yKDEpIiwibWVudV9ib3JkZXItYm90dG9tLXdpZHRoIjoiMCIsIm1lbnVfcmVzcG9uc2l2ZV9pY29uX2NvbG9yIjoiY29sb3IoNikiLCJtZW51X3Jlc3BvbnNpdmVfbGlua19jb2xvciI6ImNvbG9yKDYpIn0sIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsicGFkZGluZy10b3AiOiIyMiIsInBhZGRpbmctbGVmdCI6IjIyIiwicGFkZGluZy1yaWdodCI6IjIyIiwicGFkZGluZy1ib3R0b20iOiIyMiIsImRpc3BsYXkiOiJub25lIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9LHsiaWQiOjYwLCJuYW1lIjoib3h5LWJ1cmdlci10cmlnZ2VyIiwib3B0aW9ucyI6eyJjdF9pZCI6NjAsImN0X3BhcmVudCI6MTUsInNlbGVjdG9yIjoiLWJ1cmdlci10cmlnZ2VyLTYwLTEwIiwib3JpZ2luYWwiOnsib3h5LWJ1cmdlci10cmlnZ2VyX3RleHQiOiJNZW51Iiwib3h5LWJ1cmdlci10cmlnZ2VyX3NsdWdfaGFtYnVyZ2VyYm94X21hcmdpbl9yaWdodCI6IjUiLCJveHktYnVyZ2VyLXRyaWdnZXJfc2x1Z19oYW1idXJnZXJib3hfX19idXJnZXJfc2l6ZSI6IjAuNyIsImRpc3BsYXkiOiJub25lIn0sIm1lZGlhIjp7InBhZ2Utd2lkdGgiOnsib3JpZ2luYWwiOnsiZGlzcGxheSI6ImJsb2NrIn19LCJ0YWJsZXQiOnsib3JpZ2luYWwiOnsiZGlzcGxheSI6ImJsb2NrIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOjF9XSwiZGVwdGgiOjF9LHsiaWQiOjY1LCJuYW1lIjoib3h5X2hlYWRlcl9yb3ciLCJvcHRpb25zIjp7ImN0X2lkIjo2NSwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6Il9oZWFkZXJfcm93LTY1LTEwIn0sImNoaWxkcmVuIjpbeyJpZCI6NjYsIm5hbWUiOiJveHlfaGVhZGVyX2xlZnQiLCJvcHRpb25zIjp7ImN0X2lkIjo2NiwiY3RfcGFyZW50Ijo2NSwic2VsZWN0b3IiOiJfaGVhZGVyX2xlZnQtNjYtMTAiLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfSx7ImlkIjo2NywibmFtZSI6Im94eV9oZWFkZXJfY2VudGVyIiwib3B0aW9ucyI6eyJjdF9pZCI6NjcsImN0X3BhcmVudCI6NjUsInNlbGVjdG9yIjoiX2hlYWRlcl9jZW50ZXItNjctMTAifSwiY2hpbGRyZW4iOlt7ImlkIjo2MSwibmFtZSI6Im94eS1zbGlkZS1tZW51Iiwib3B0aW9ucyI6eyJjdF9pZCI6NjEsImN0X3BhcmVudCI6NjcsInNlbGVjdG9yIjoiLXNsaWRlLW1lbnUtNjEtMTAiLCJvcmlnaW5hbCI6eyJveHktc2xpZGUtbWVudV9leHRyYV9tZW51X2xpbmtfcGFkZGluZ19wYWRkaW5nLWJvdHRvbSI6IjEyIiwib3h5LXNsaWRlLW1lbnVfZXh0cmFfbWVudV9saW5rX3BhZGRpbmdfcGFkZGluZy10b3AiOiIxMiIsIm94eS1zbGlkZS1tZW51X2V4dHJhX3NsaWRlX21lbnVfc3VibWVudV9tYXJnaW5fbWFyZ2luLWxlZnQiOiI0MCIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIxMDAiLCJveHktc2xpZGUtbWVudV9zdGFydCI6ImhpZGRlbiIsIm94eS1zbGlkZS1tZW51X3NsdWdfb3h5c2xpZGVtZW51bGlzdGN1cnJlbnRtZW51aXRlbWFfY29sb3IiOiJjb2xvcigzKSJ9LCJtZWRpYSI6eyJwYWdlLXdpZHRoIjp7Im9yaWdpbmFsIjp7Im94eS1zbGlkZS1tZW51X2V4dHJhX21lbnVfbGlua19wYWRkaW5nX3BhZGRpbmctbGVmdCI6IjEwIiwib3h5LXNsaWRlLW1lbnVfZXh0cmFfbWVudV9saW5rX3BhZGRpbmdfcGFkZGluZy1yaWdodCI6IjEwIn19fSwiY3RfY29udGVudCI6IiJ9LCJkZXB0aCI6ZmFsc2V9XSwiZGVwdGgiOjF9LHsiaWQiOjY4LCJuYW1lIjoib3h5X2hlYWRlcl9yaWdodCIsIm9wdGlvbnMiOnsiY3RfaWQiOjY4LCJjdF9wYXJlbnQiOjY1LCJzZWxlY3RvciI6Il9oZWFkZXJfcmlnaHQtNjgtMTAiLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImNsYXNzZXMiOnsiYXRvbWljLWxvZ28iOnsia2V5IjoiYXRvbWljLWxvZ28iLCJwYXJlbnQiOiJhdG9taWMiLCJvcmlnaW5hbCI6eyJvcGFjaXR5IjoiMC44IiwidHJhbnNpdGlvbi1kdXJhdGlvbiI6IjAuNSIsInRyYW5zaXRpb24tdGltaW5nLWZ1bmN0aW9uIjoiZWFzZSIsInRyYW5zaXRpb24tcHJvcGVydHkiOiJhbGwifSwiaG92ZXIiOnsib3BhY2l0eSI6IjEifX19LCJjb2xvcnMiOnsiMyI6eyJpZCI6MywibmFtZSI6IkhpcHBpZSBCbHVlIiwidmFsdWUiOiIjNjc5OWIyIn19fQ==
