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

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 2

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 3

Check the frontend of your site to see the menu in action.

Step 4

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.

https://sridharkatakam.com/animated-hamburger-menu-icon-genesis/

https://sridharkatakam.com/animated-hamburger-menu-icon-in-cafe-pro/

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

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

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.
  • 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;

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