One of my pet peeves with Oxygen is its lightbox-style mobile menu implementation which does not show sub menus. Being a Genesis fan, I am used to its simple-yet-complete accessible mobile menu (demo).
So I spent this weekend going through the code in parent Genesis theme, Genesis Sample child theme, and Oxygen.
The result is Oxygen Responsive Menu plugin which combines Superfish (from parent Genesis theme) with StudioPress’ ResponsiveMenus.js (from the child theme) and CSS-animated hamburger.
Below are the instructions to set up the header from the above demo site in Oxygen:
Step 1
Install and activate Oxygen Responsive Menu plugin.
Step 2
Go to Appearance > Menus and create a new menu if there isn’t one already.
A Menu with the name of Main Menu is preferred but is not mandatory.
Step 3
Edit your Main Catch All Template in Oxygen editor that has (or is going to have) sitewide header and footer with an Inner Content element in between.
a) Add a Section and move it above all other elements.
Set the Tag to header.
Advanced > Size & Spacing > Container Padding: 0 for top and bottom.
b) Add a Div inside the Section.
Set Width to 100%.
Advanced > Size & Spacing > Layout > Display: block.
c) There is probably already a Header (typically, Header Builder element) present. If so, duplicate the Link Wrapper element that wraps the logo in it. Drag the new duplicated element into the Div created in the earlier step.
If not, select the Div from the earlier step and add a Link Wrapper element linking to your site’s homepage with your logo using an Image element inside it.
d) At this time you should be done with your old header and you may delete it.
e) Add a Shortcode element inside the Div below the Link Wrapper.
Paste this shortcode: [oxygen-responsive-menu]
If the name of the Menu you want to show is named anything other than Main Menu, use this shortcode instead:
[oxygen-responsive-menu menu="My Menu"] where My Menu is the name of your WordPress menu.
Step 4
Check the frontend of your site to see the menu in action.
Step 5
To make any changes to the menu’s appearance, edit the css file inside the plugin.
References
genesis/lib/classes/class-genesis-script-loader.php.
genesis-sample/functions.php and genesis-sample/style.css.
plugins/oxygen/component-framework/component-init.php.