As we move into modern design, the familiar three horizontal lines of a hamburger menu have largely become synonymous with mobile navigation. However, a growing trend sees this compact icon making its way onto desktop sites.
While unconventional, strategically implementing a hamburger menu on a larger screen can offer a fresh and minimalist approach to user interface design. This article will guide you through the process of bringing this mobile-first element to your Divi desktop site, unlocking new possibilities for visual appeal and user experience.
Why Embrace the Desktop Hamburger?
You might be wondering, “Why would I hide my navigation on a spacious desktop screen?” To be honest, I asked the same question at first but here are several reasons to consider this design choice:
- Clean and Minimalist Aesthetics: A hamburger menu inherently reduces visual clutter. By collapsing the main navigation into a single icon, you can achieve a cleaner and more focused design, allowing your content and visuals to take center stage. This can be particularly effective for portfolio sites, landing pages, or websites with strong visual identities.
- Prioritizing Key Content: In situations where you want to immediately draw attention to specific elements or calls to action, a hidden navigation can help guide the user’s focus. The primary content becomes the initial point of engagement, and the navigation is readily available when needed.
- Unconventional and Memorable Design: In a sea of websites with traditional horizontal navigation bars, a strategically placed desktop hamburger menu can help your site stand out. This unexpected element can contribute to a unique and memorable user experience.
It’s important to note that while there are benefits, careful consideration should be given to your target audience and the overall usability of your site. Ensure the icon is clearly visible and that the navigation it reveals is intuitive.
CSS Class
.dd-hamburger-menuIf you want to use this one and copy and paste it into Divi – remember to remove the . before dd (see the video if you are unsure)
CSS Code
/*** show hamburger menu on desktop ***/
@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}
.et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu {
margin-top: 20px;
}
/*** menu settings ***/
.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center !important;
}
/*** centre the list items ***/
.et_pb_menu_0_tb_header.et_pb_menu .nav li ul.sub-menu a, .et_pb_menu_0_tb_header.et_pb_menu .et_mobile_menu a {
padding-top: 10px;
text-align:center;
}
/*** remove bullet points on menu items ***/
.et_pb_menu .et_mobile_nav_menu li {
list-style-type: none;
}
}And that’s it! With just a few lines of CSS, your Divi menu has entered the modern times.
Implementing a hamburger menu on a Divi desktop site is a deliberate design decision that can yield significant aesthetic and potentially experiential benefits when executed thoughtfully. By embracing this less conventional approach, you can achieve a cleaner visual presentation, prioritize key content, and create a more distinctive online presence. As you embark on this customization, remember to prioritize user experience and test your implementation thoroughly to ensure seamless navigation on all screen sizes.
If you found this helpful, be sure to check out the rest of my Divi tips and tutorials. I’m always looking for ways to make your site look and perform better, with simple solutions that anyone can follow.
