Spice Up Your Mobile Menu Design

Transform your mobile menus from boring to bad-ass with these simple tweaks!

Published:

Filed Under:

General

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Slideout (2)
This content contains affiliate links. View our affiliate disclaimer.

When it comes to the mobile menu options inside of GeneratePress, I’ve always been a big fan of the slide-in off-canvas option.

But the options in the customizer alone leave the menus feeling just a tad boring.

Now, I’m not making the case that your mobile menu should be some extravagant or elaborate design — but I do think going from this, to this is a huge improvement.

In fact, I recently did this on a client project, and I think it ended up being my favorite part of the entire website!

And thankfully, it’s really easy to do with just a couple GeneratePress elements and one CSS rule.

So, if you’re interested in spicing up your mobile menus, stick around, and let’s get into it!

Here's the CSS you need:

#generate-slideout-menu:before {
    position: absolute; 
    width: 100%;
    height: 100%;
    content:'';
    background-image: url('IMAGE-URL');
    background-position: center center;
    background-size: cover;
    opacity: .3;
}
Share this article!

Kyle Van Deusen

The Admin Bar

Born in California and raised in Texas, Kyle is a husband and proud father of three. After spending 15 years as a graphic designer and earning a business degree, he launched OGAL Web Design in 2017, The Admin Bar community with Matt Sebert in 2018, and Docket WP with Andre Gagnon in 2020.

Come Join Us!

Join the #1 WordPress Community and dive into conversations covering every aspect of running an agency!

Kyle Van Deusen

Community Manager

The Friday Chaser

Wash down the week with the best of The Admin Bar! News, tips, and the best conversations delivered straight to your inbox every Friday!

Latest Events

September 16th, 2022

Kevin Powell Talks WordPress!

What we can learn from a master front end developer

August 19th, 2022

Optimizing Live with Perfmatters

Get a behind-the-scenes look at how Brian uses Perfmatters on live websites!

July 8th, 2022

New TAB Site Teardown

How any why I rebuilt The Admin Bar website with GenerateBlocks (Featuring Dave Foy)
Vertical Banner

More Articles

navigations

Most (and Least) Popular Agency Website Navigation Items

Your navigation is arguably one of the most essential parts of your website… but is yours what your customer’s are expecting?

selective focus of human and robot hands typing on laptop at wor

How to write a blog post that ranks on Google (with some blogging freebies!)

My best tips and techniques of the trade to make sure that your next blog post (whether lovingly-handcrafted or AI-based) is built to convert (and rank on Google). 

Post Feat Im

Performance Implications of GenerateBlocks New Features

I put the new accordion and tabs blocks from GenerateBlocks to the test to find out how they will impact your website’s performance.