Are you tired of the standard horizontal menu that Divi’s Menu Module offers for footers? Looking to level up your website’s footer with a sleek and functional vertical menu instead? You’re in the right place.
In this tutorial, I’ll guide you through the process of transforming Divi’s default footer menu into a vertical masterpiece. With a few tweaks and a touch of CSS magic, you’ll have a footer menu that not only looks great but also enhances the user experience on your website.
Why bother with a vertical footer menu, you ask? Well, for starters, it offers better usability and navigation, especially on mobile devices where vertical scrolling is the norm. Plus, it just looks cleaner and more professional, aligning perfectly with modern web design trends.
The default behaviour of Divi’s Menu Module may leave you feeling limited, with hamburger menus all over the place on mobile devices, but fear not! Armed with some CSS knowledge and a willingness to experiment, you’ll be amazed at what you can achieve. We’ll be aiming to achieve the below look:
Mobile – Before
Mobile – After
I’ll walk you through each step, from reimagining the layout to adjusting styles for optimal display. Whether you’re a seasoned web developer or a newcomer to the world of WordPress, you’ll find this tutorial accessible and actionable.
By the end of this guide, you’ll be equipped to integrate stylish, mobile-friendly menus seamlessly into your website. Allowing you to manage your websites menus much more easily through the WordPress admin area under Appearance->Menus. The menus will also offer optimal functionality on tablets and mobile devices.
Method #1 – Using Divi’s ‘Free-Form CSS’ Setting
So, let’s dive in and discover what’s possible with Divi’s Menu Module! The quickest, easiest, and probably ‘dirtiest’ one-step method to achieve a vertical footer menu is by simply utilising Divi’s relatively new ‘Free-Form CSS’ settings.
Just add a menu module to one of the columns in your footer and add the code below in the ‘Free-Form CSS’ settings under the ‘Advanced’ tab in the Menu modules settings:
Divi Menu Module Settings
Free-Form CSS Code
selector .et_pb_menu__menu nav ul {
flex-direction: column;
row-gap: 5px;
margin: 0!important;
}
selector .et_pb_menu__menu ul li {
display: block!important;
margin: 0!important;
padding: 0!important;
}
selector .et_pb_menu__menu ul li a {
display: block;
padding: 10px 0!important;
}
/* Responsive Tablet/Mobile CSS */
@media (max-width: 980px){
selector .et_pb_menu__wrap {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
selector .et_pb_menu__menu {
display: flex;
}
selector .et_mobile_nav_menu {
display: none;
}
}Note: You can safely ignore the ‘Unknown property’ notice – this is due to Divi’s CSS editor not being up to date with modern CSS properties such as ‘row-gap’ when using CSS Flex.
Method #2 – Adding Custom CSS to the Divi Theme Options (or Child Theme ‘style.css’)
Following the DRY (Don’t Repeat Yourself) principle, the best way to customise the footer menus, especially if you have more than one footer menu, is to add the custom CSS code to your Divi Theme Options ‘Custom CSS’ settings instead.
We can then apply it to any number of menus by assigning and using a simple CSS class name to target our specific footer menus for styling.
We’ll effectively use the same code from before but use vanilla CSS this time. Add the following code to your ‘Custom CSS’ – if you have some CSS code in there already, add this to the bottom of any existing code:
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu nav ul {
flex-direction: column;
row-gap: 5px;
margin: 0!important;
}
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu ul li {
display: block!important;
margin: 0!important;
padding: 0!important;
}
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu ul li a {
display: block;
padding: 10px 0!important;
}
@media (max-width: 980px){
.et_pb_menu.wpmad-footer-menu .et_pb_menu__wrap {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.et_pb_menu.wpmad-footer-menu .et_pb_menu__menu {
display: flex;
}
.et_pb_menu.wpmad-footer-menu .et_mobile_nav_menu {
display: none;
}
}Then, simply add a menu module to your websites footer and add the CSS Class name wpmad-footer-menu in the CSS Class settings under the Advanced tab of the Divi menu module settings:
Once you’ve saved the changes you should now have a beautiful vertical menu in your websites footer that looks something like below:
Explanation and further reading
These methods only affect the layout and usability of the Divi menu module, improving it considerably, and without affecting common styling settings which can be achieved through the module settings.
Changing the menu to display vertically
The following CSS rule changes the menu items to display in a column by changing the default ‘flex-direction‘ property from ‘row’ to ‘column’. This is what, essentially, changes the menu items to display vertically:
selector .et_pb_menu__menu nav ul {
flex-direction: column;
row-gap: 5px;
margin: 0!important;
}This CSS Code also controls the vertical gap between the items using the CSS Flex Gap property, specifically ‘row-gap’. Also, it resets the unneeded, negative margins that Divi adds – more on this later!
Resetting margins/padding and improving the clickable area for links
Following on from above, more resets are required to remove unnecessary CSS code that Divi applies to menu items as default:
selector .et_pb_menu__menu ul li {
display: block!important;
margin: 0!important;
padding: 0!important;
}
selector .et_pb_menu__menu ul li a {
display: block;
padding: 10px 0!important;
}This CSS changes both the list item ‘li’ and the anchor link itself to ‘block’ level elements using the ‘display’ CSS property – this is done more for usability as it will make the clickable area of each link the same, effectively increasing the clickable area for the link, making it easier for a user to click/press.
Again, spacings are reset where they aren’t needed (specifically the ‘li’ elements) and a top/bottom padding value of ’10px’ is added to the ‘a’ links. This increases the clickable height of each link again, making it better for usability and easier to click accurately.
Here’s an overview of the layout differences to the list items and anchor links for usability/UX:
Responsive Tablet/Mobile CSS Code
The final piece of the puzzle is the CSS code that takes care of the switch to how the menu module displays on mobile devices such as tablets or mobile phones.
When the viewport width of your device is 980px or less, Divi applies CSS styling which hides the desktop menu and displays the mobile hamburger menu and changes the alignment of the menu items/hamburger. We’re overriding the default behaviour with the final part of code:
@media (max-width: 980px){
selector .et_pb_menu__wrap {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
selector .et_pb_menu__menu {
display: flex;
}
selector .et_mobile_nav_menu {
display: none;
}
}The first CSS rule ensures that the menu ‘flex’ items are aligned to the start (or left) using the ‘justifiy-content’ CSS property. Divi, by default, displays the mobile hamburger-style menu aligned to the right, so we need to override this.
The second CSS rule forces the display of the desktop menu using ‘display: flex;’, preventing it from being hidden on mobile devices.
The third and final CSS rule forces the mobile menu to be hidden using ‘display: none;’
I hope this post helps some of you out there and if you have any questions or would like to leave a comment, please do so below! I look forward to hearing from some of you soon!
0 Comments