I made my Divi mobile menu go from not to hot. Here’s how.
This blog post contains referral links. I don’t recommend stuff that my clients and I haven’t loved on our creative biz adventure. I will receive a modest credit to my account should you love these tools and apps as much as I do!
Operation refresh: Divi Mobile Website Edition
Every season, I give my website some nips, some tucks, and some much-needed adjustments to both the look and user experience. Yes, it’s definitely one of the benefits of designing websites professionally and also because I happen to love redecorating my digital home.
Just a few of the benefits of giving your website a little spring cleaning:
- That New Website Smell: Changing up graphics, typefaces, and colors is a quick way to give your audience a new experience
- Get Strategic: Armed with your Google Analytics data, you can plan new user journies for website visitors and increase your conversions
- Out With The Old: Update your plug-ins and see what’s working on your website and what you’ve been begrudgingly using because you haven’t had time to fix it
I spruced up a few things around the ol’ digital domicile this month, but now I’m turning my attention to Creative Enabler’s mobile experience.
THat Divi mobile menu is ugly
I have been putting off fixing up a few of my website’s design chores, but that Divi mobile menu has been getting under my skin since I first made the move to Divi (December of 2017, as it were).
My biggest issue is that it make a Divi website look like a Divi website that’s been barely customized from a pre-set template. Youch. That gray hamburger menu with the sad drop-down has got to go.
I knew I wanted to simplify the look without going too artsy on the menu; After all, if someone is viewing my website on a mobile phone, I’m now competing with 53 other apps and their text messages for attention.
I also knew that I wanted to make the hamburger menu intuitive upon opening that the words were clickable.
BEHOLD, MY NEW AND IMPROVED CUSTOM DIVI MOBILE MENU:
Divi Mobile Menu CSS codes FTW
The CSS codes to customize the Divi mobile menu achieved the following:
- Removed gray Select Page menu from Divi mobile website
- Added WooCommerce cart button to left of logo in Divi mobile menu
- Added hamburger menu link to right of logo in Divi mobile menu
- Added drop-down menu with color backgrounds in open hamburger menu
- Hamburger menu displays X upon opening menu
- Created a fixed mobile menu on Divi
- Added more spacing between letters on link url text in hamburger menu
No Fake News(letters)
#JustTheTips is not an elaborate sales pitch masquerading as a resource for creative entrepreneurs.
Get microdoses of achievable inspiration weekly, revealing the mindset, strategy, and business infrastructure of successful brands.