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.

Live Demo

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.

Burger Trigger Button Text settings with the button text set to Menu and burger box margin-right of 5px

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:

Slide Menu Menu Items spacing settings at the default breakpoint, with 12px top and bottom padding
Slide Menu Sub Menus spacing settings with a left margin of 40px
Slide Menu Current Menu Item settings with the color set to atomic - Hippie Blue

1120px breakpoint:

Slide Menu Menu Items spacing settings at the 1120px breakpoint, with 10px left and right padding

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==

Keep up to date with new tutorials, information on new features & example use cases.

Subscribe