Setting Up A Fullscreen Menu Overlay in Oxygen Builder

Authored By: James LePage
Published On: July 25, 2020

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

amazon elementor E book

In this quick tutorial we wanted to discuss how to set up a full screen menu overlay for Oxygen Builder. If you're using the default menu element in Oxygen, typically the mobile responsive version of your menu will display as an overlay on the phone. 

Thanks for the feedback!

Sometimes, it makes sense to have a full screen menu overlay on a desktop device. This allows you to display your menu links, but you can also set up dynamic elements such as recent blog posts, call to actions, and more depending on your needs. 

With Oxygen, this is fairly simple and easy to do. 

How to add your full screen menu to Oxygen 

To do this, we need to be using a catchall header and footer template. This is standard when we create websites, where we have a header section, inner content section, and then a footer section. This template is applied to all pages using a catchall filter (though you can specify where exactly you want different variations of headers to show by using different filters). 

Typically, you would simply add a menu or a pro menu element at this point. You can even set up a megamenu, and we created a tutorial on how to do that here. 

If you want something even more though, doing a full screen menu overlay may be your best bet. 

To set this up, we're simply going to use a modal element, meaning that there's no third party code or components needed to make this possible. 

First, let's set up our header. This header element will simply contain our logo on the left, and a menu toggle on the right. This menu toggle can be incredibly simple to incredibly complex.  

In this example, we are simply going to use the text “menu”. this is done by adding a normal text element to the menu, labeling it, and then adding custom CSS that makes it non selectable, and changes the cursor to a pointer when hovering over it.  

cursor:pointer user-select: none;

We then also give it a custom class like “.menutoggle”. 

However, you could use CSS or JavaScript to create a unique animation when clicking or hovering. Many websites utilize the hamburger icon, but when clicking on it the three lines that make it up merged together. If you need some inspiration and code for your menu toggle, here's a cool CodePen: 

After our menu toggle is complete, we are going to set up our modal. It needs to be full screen, hover over all other content, and be easy to close. 

To do this, we add a modal element, set it to be 100 VH tall, 100 VW wide and absolutely positioned above all other content. In this example, there will be no scrolling from within the modal, but you can set that up by following this tutorial. 

Our first step after creating the general modal is connecting it to our menu toggle. When somebody clicks on the menu toggle, the full screen overlay menu needs to show. 

This is done by going to trigger, and setting it to display when user clicks an element. Then, simply add the custom CSS class that you gave to the menu toggle into the field. In our case it would be “.menutoggle”. 

When the user clicks on the menu hamburger element, the full screen overlay menu will display in your Oxygen Builder website. By default, it just fades in, but you can add many unique modal display effects (gooey transitions are cool). 

The overall background of the modal will be the background of our overlay menu. In this example, we are simply going to use an individual color, but you can add a video background, image, or more. Think of it as just adding another section to your page, there's a lot that you can do here. 

Also, keep in mind that this overlay menu will end up loading on all pages. Be mindful with the design and the elements that you use in it, as it will impact your pages loading time. 

Once the underlying modal is set up, you have several options on how to proceed. The simplest overlay menu simply displays the links of your major pages. Typically, this is done vertically, but you can also do it horizontally. You can choose to add standard text and wrap it in a link wrapper. 

This is typically how we do it, and we add unique hover effects. Typically, the text is at 80% opacity until somebody hovers over it. It then becomes 100%, and we also add a strikethrough. This shows that the user is hovering over the proper link. 

As soon as they click on the link, they are redirected to the new page. There's no need to set up any function that closes the menu when clicking on a link, though you can do this if need be. 

You can add any standard Oxygen component to this menu. Examples could include using easy posts to display your most recent blog posts, static call to actions to your sales pages, a contact form, or more. 

The final thing to think about is how users will close your overlay menu. By default, clicking the escape key will close a modal, and we keep this functionality for our menu. However, we also want to set up our own custom closed button that is highly visible. 

This is done by adding a string of text, or a button. Typically, it says close and is located in the left or right hand upper corner. To set it to close the menu, give it the custom class of “.oxy-modal-close". 

Conclusion 

This is a simple way to add a full screen overlay menu to the Oxygen Builder, with no code and no third party plugins. If you have any questions about how to implement this on your own site, feel free to reach out in the comments below. If you have any tutorial requests, let us know as well! 

Join Our Growing Mailing List Of Design Crazed Individuals

Expertly curated emails that will help you generate more income through good design.

You're in the club 💪.

Something went wrong.

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nico here!
Nico here!
1 month ago

Thanks a bunch for this really simple method!

James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!

Social Share

Crafting Stunning Digital Appearances & Assets Out Of New York.
Get In Touch
Syracuse, NY | Charlotte, NC | New York, NY
© 2020 Isotropic, LLC
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram