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.

Download from Github

Live Demo

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.



genesis-sample/functions.php and genesis-sample/style.css.


Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?



For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.

10 comments on “Oxygen Responsive Menu”

  1. Hi Sridhar, I’ve followed your steps and it all looks good, BUT, I’m not a CSS expert at all. I’ve edited the file and want to change the colours of the selected menu option and also the hover-text option to my red colour. See example below. But it has no effect after saving the file. Can you assist possibly please. tx. Manus

    .genesis-nav-menu a {
    color: #C8102E;
    display: block;
    font-weight: 400;
    outline-offset: -1px;
    padding-top: 14px;
    padding-bottom: 14px;
    text-decoration: none;
    text-transform: uppercase;

  2. If I use the “Shortcode Wrapper” in Oxygen 2.1.2, I get a “[/oxygen]” tag below the menu. I fixed it by removing the “Shortcode Wrapper” and using a “Code Block” and adding the following code:

  3. Hi
    I had this working on the old website – now the responsive menu dropdown arrows are hovering over the menu items – I tried changing the css a bit but that didn’t work out… I’m not a css expert – by any means 🙂 the site is:

    Thank you!

  4. Hi Sridhar,
    I’ve followed the instructions above and I’m having an issue with the layout. If the div is set to block, the link wrapper is displaying centre and the menu is displaying below and to the right on a normal screen. When viewed as mobile, the burger menu is bottom right. I can correct this by setting the div to stack child elements horizontally but this then knocks out the formatting of the mobile menu and it’s all compressed rather than full width. I’ve had this working before on another site without issue but even starting with a completely new section, I just cannot get it to work. It’s probably a really simple solution but any feedback would be appreciated.

      1. Hi Sridhar,
        I do, just like in your demo site. I’ve had it working fine on a different site so unsure why it’s not working on this one. All divs and sections involved are new with no classes and set up as per your instructions so a bit puzzled as to why it’s not working.

  5. Hi Looking to put the logo and menu on the same line as in your demo but the menu appears below the logo. I see others having the same issue is there a solution?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: