Transform Your Divi Site with Easy Icon Dropdown Menus!
Hi everyone, welcome to another Divi theme tutorial! This is Jamie from System22 and WebDesignandTechTips.com. Today, we’ve got an exciting project for you: creating a dropdown menu that activates on hover using Divi. A few videos ago, we covered how to add a vertical side menu to any page. Today, we’ll be enhancing our navigation with a dropdown menu triggered by hovering over an icon. This interactive feature is perfect for guiding users to specific sections on your page or anywhere on the web. Let’s dive into the details!
When you look at the left-hand side of our demo, you’ll notice a small icon. When you hover over it, a dropdown menu appears, revealing several links. This is a fantastic way to direct visitors to different sections of your site, ensuring a smooth navigation experience. Even better, this effect works perfectly on tablets and mobile devices too! By using the Google Chrome inspector tools (F12 key), you can see how the dropdown adapts to different screen sizes, from an iPhone 12 to an iPad Air. Let’s walk through how to set this up.
Step-by-Step Guide to Creating a Dropdown Menu
1. **Enable Visual Builder**:
Start by enabling the Visual Builder in Divi. Click on the purple button at the bottom and switch to Wireframe mode by clicking the icon on the left. This view makes it easier to work with fixed positioning.
2. **Add a New Row**:
Delete any existing rows and add a new one. Click the green button to insert a single column. In this column, we’ll place the icon that will trigger our dropdown menu.
3. **Insert the Icon Module**:
Search for an icon module and select an appropriate icon. For this example, we’ll use a menu icon. Adjust the icon size and color under the Design tab. Set the desktop icon color to white and change the hover color to red for a dynamic effect.
4. **Adjust Padding and Sizing**:
Ensure the icon is square-shaped by tweaking the padding in the Design tab. Set the padding to around 5 pixels top and bottom and 6 pixels left and right. Adjust until the icon looks balanced.
5. **Create the Dropdown Menu**:
Underneath the icon module, add a menu module. Choose the menu you’ve previously created in the WordPress dashboard (Appearance > Menus). Set the background color to black and adjust the menu text to white for visibility.
6. **Customize Menu Layout and Spacing**:
Center the menu text and set the menu width to match the icon size (e.g., 125 pixels). Add padding to the left side to center the text and adjust the line height to space out the links for easier tapping on mobile devices.
7. **Hide the Dropdown Until Hover**:
Go back to the row settings and set a fixed height (around 44 pixels). Use the overflow setting under the Advanced tab to hide any overflowing content. Adjust the height on hover to 100% so the full menu appears when the icon is hovered over.
8. **Final Adjustments**:
Hide the custom dropdown on tablet and mobile devices to ensure the default hamburger menu appears. Use fixed positioning to place the icon in a convenient spot on the screen, ensuring it stays visible as users scroll.
Detailed Walkthrough
Let’s break down the process with a bit more detail, ensuring that even those new to Divi can follow along without any issues.
Step 1: Enabling the Visual Builder
Enabling the Visual Builder is the first step to customizing your Divi site. This feature allows you to edit the page in real-time, providing a visual representation of your changes. By switching to Wireframe mode, you can view the structure of your page, making it easier to manage and adjust elements, especially when working with fixed positions.
Step 2: Adding a New Row
When you add a new row, you’re essentially creating a container for your modules. In this case, the single column will hold both the icon and the dropdown menu. This modular approach in Divi makes it easy to organize and manage different elements on your page.
Step 3: Inserting the Icon Module
Icons are a great way to add interactive elements to your site. By selecting a suitable icon and adjusting its size and color, you can ensure it stands out and attracts user interaction. Changing the hover color to red adds an interactive element that signals to users that this icon has a special function.
Step 4: Adjusting Padding and Sizing
Padding is crucial for visual balance. By tweaking the padding, you ensure that your icon looks proportional and is easily clickable. This step is all about fine-tuning the appearance of the icon to make sure it looks great and functions well.
Step 5: Creating the Dropdown Menu
The dropdown menu is where the magic happens. By adding a menu module and linking it to a pre-created menu from your WordPress dashboard, you can create a dynamic navigation element. Setting the background color to black and the text to white ensures the menu is visible and stylish.
Step 6: Customizing Menu Layout and Spacing
Spacing is another important visual element. By setting the width and adding padding, you can center the text and ensure the menu items are easy to read and click. Adjusting the line height spreads out the links, making them more touch-friendly on mobile devices.
Step 7: Hiding the Dropdown Until Hover
Using the fixed height and overflow settings ensures that the dropdown menu is hidden until the icon is hovered over. This step involves a bit of advanced tweaking but is essential for creating a clean, professional look. By setting the height on hover to 100%, you ensure the full menu is revealed when needed.
Step 8: Final Adjustments
Final adjustments include hiding the custom dropdown on smaller screens to ensure the default hamburger menu appears. Fixed positioning allows you to place the icon in an optimal spot, ensuring it remains visible as users scroll through your page.
Testing and Finalizing
After setting up the menu, save your changes and exit the Visual Builder. Test the functionality on different devices using Chrome’s inspector tools. On tablets and mobiles, the custom icon will be hidden, and the default hamburger menu will appear instead. This ensures that your site remains user-friendly across all devices.
Conclusion
Creating a dropdown menu with Divi is a fantastic way to enhance your site’s navigation. This tutorial covered everything from enabling the Visual Builder to making final adjustments. By following these steps, you can create a dynamic, interactive menu that works seamlessly across all devices.
I hope you enjoyed this tutorial and found it useful. If you did, please like, share, subscribe, and leave a comment below. Your feedback helps us create more tutorials to assist you. For more menu effects, check out our menu effects playlist. Thanks for watching, and have a great day!
Try out the Divi theme:
Divi Supreme Modules Pro Plugin 10% Off:
Divi Supreme Modules Light Plugin: https://divisupreme.com/divi-plugins/?ref=6
Divi Supreme Modules Playlist: https://www.youtube.com/watch? v=ZAO2MH0dQtk&list=PLqabIl8dx2wo8rcs-fkk5tnBDyHthjiLw
Playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Full Ecommerce Site Build Playlist: https://www.youtube.com/watch? v=rNhjGUsnC3E&list=PLqabIl8dx2wq6ySkW_gPjiPrufojD4la9
Contact Form With File Upload Video: https://youtu.be/WDo07nurfUU
Divi 4 Theme Create An Ecommerce Store In One Hour: https://youtu.be/qP-ViPakoSw
Check out our playlist page for more videos on this: https://www.youtube.com/c/System22Net/playlists
Sub: https://www.youtube.com/channel/UCYeyetu9B2QYrHAjJ5umN1Q?sub_confirmation=1
Why Divi?
Divi is a popular WordPress theme known for its ease of use and versatile design. It is a versatile theme that can be used for a variety of websites, including business, personal, and eCommerce stores.
The Divi Theme offers a wide range of customization options, allowing users to create a unique website that is tailored to their needs. The theme has a drag and drop page builder, which makes it easy to create custom layouts and pages. This feature makes it easy to customize the look and feel of your site without having to do any coding.
The Divi Theme also offers a variety of pre-made layouts and designs, making it easy to find something that meets your needs. It also has a library of modules, which are snippets of code that can be used to add functionality to your website. This makes it easy to add contact forms, social media buttons, and other features to your website quickly and easily.
The Divi Theme also comes with a wide range of customization options, allowing users to easily change the colors, fonts, and other elements on their website. It also has a wide range of plugins, which can be used to extend the functionality of the theme and add more features to your website.
The Divi Theme is also optimized for speed and performance, making sure that your website loads quickly and runs smoothly. It is also optimized for search engine optimization, making sure that your website is visible in search engine results.
The Divi Theme also comes with a wide range of support options, including video tutorials and a dedicated support forum. This makes it easy to get help if you have any questions or need assistance with the theme.
Overall, the Divi Theme is a great option for anyone looking to create a professional website quickly and easily. It is easy to use, versatile, and offers a wide range of customization options. It is also optimized for speed, performance, and search engine optimization, making sure that your website is visible in search engine results. With its powerful features and great support options, the Divi Theme is an excellent choice for
anyone looking to create a website.
10 Compelling Reasons to Choose the Divi Theme from Elegant Themes
In today’s dynamic web design realm, selecting the right WordPress theme is pivotal for crafting visually captivating and highly functional websites. Amidst a plethora of options, the Divi theme from Elegant Themes emerges as a standout choice, offering a wealth of features tailored to both novice users and seasoned developers. Let’s explore the 10 compelling reasons why Divi reigns as the preferred option for website creators.
1. **Intuitive Drag-and-Drop Builder:** Divi’s hallmark feature lies in its intuitive drag-and-drop builder, enabling users to effortlessly customize their websites without the hassle of intricate coding. With real-time visual feedback, designing becomes seamless and user-friendly.
2. **Versatile Pre-built Layouts:** Divi boasts an extensive library of pre-built layouts catering to diverse industries and design preferences, serving as a solid foundation for portfolios, blogs, or e-commerce sites.
3. **Responsive Design Controls:** In the era of mobile browsing dominance, Divi’s responsive design controls allow easy customization across various devices, ensuring a consistent and visually appealing user experience.
4. **Global Elements and Styles:** Divi streamlines design consistency through global elements and styles, enabling users to implement changes site-wide effortlessly, thus achieving a cohesive and polished look.
5. **Robust Split Testing:** Divi offers built-in split testing capabilities, empowering website owners to experiment with different layouts and elements to optimize engagement and conversions.
6. **WooCommerce Integration:** Seamlessly integrating with WooCommerce, Divi facilitates the creation of visually appealing online stores, ensuring a smooth shopping experience from product pages to checkout.
7. **Comprehensive Design Options:** Divi offers an extensive array of design options, allowing users to customize every aspect of their website, from fonts and colors to spacing and borders.
8. **Regular Updates and Support:** Backed by Elegant Themes, Divi receives regular updates and dedicated support, ensuring users have access to the latest features, bug fixes, and security enhancements.
9. **Multilingual Ready:** Divi’s compatibility with multilingual plugins facilitates the creation of websites catering to diverse audiences in our globalized world.
10. **Community and Documentation:** With a thriving user and developer community, Divi provides extensive documentation, tutorials, and forums, offering valuable resources for guidance, troubleshooting, and inspiration.
In essence, the Divi theme from Elegant Themes stands out as an exceptional choice for crafting dynamic, visually appealing, and functional websites. Its user-friendly interface, versatile features, and ongoing support make Divi a standout option for website creators of all skill levels. Whether you’re a beginner or an experienced developer, Divi’s robust capabilities make it a top contender in the realm of WordPress themes.
Free Stock Photos
Stock photos are essential when you’re building a website. Of course it’s quite possible to build a website not using any photos or images, but it’s going to be a pretty uninteresting looking site, even if the content is top-notch. Adding images to any website creates an interest factor, attracts the eye and will surely make your visitors more likely to read on and see a little more.
There are a huge number of stock photo sites available out there, and they all have some really fantastic looking images ready for you to insert into your site. But buying these images can get quite expensive especially from some of the more well-known sites like Shutterstock.
Free Stock Photos – Where to get an unlimited supply
Latest YouTube Videos
