fbpx

Custom Divi Mobile Menu Styling

Apr 27, 2019 | Just The Tip

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:

     

    DIvi Struggle Is Real

    Want my exact code for what you just saw? Need help with your Divi styling?

    [ Click the Help Button ]

    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.