Divi Lovers: Upgrade Your Site with an Impressive Global Header & Mega Menu!
Hi everyone, welcome back to another Divi theme tutorial! This is Jamie from System22 and WebDesignDetectives.com. Yesterday, we created a stunning full-screen, full-width Mega Menu that popped up from a button on your page. We received an excellent question from one of our viewers: “Can I use this Mega Menu in my main header so it pops up on every single page?” The answer is a resounding yes! Today, I’ll show you how to integrate this Mega Menu into a custom global header. It’s straightforward and doesn’t take much time. By the end, you’ll have a button in your header that triggers the Mega Menu on any page you want.
If you haven’t seen our previous video, make sure to check it out. I’ll include a link in the description below. That video covers building the Mega Menu, including the necessary script and CSS code. For today’s tutorial, we’ll start with creating a custom header and adding the button for the Mega Menu. This feature is a fantastic addition to your website, making it interactive and engaging across all devices. So, let’s get started! Here’s what we created yesterday: a button that pops up a full-width, full-screen Mega Menu, and it’s fully responsive. I’ll guide you through adding this functionality to your global header. Let’s dive in!
Let’s start by creating a global header in the Divi Theme Builder. Navigate to your WordPress dashboard, go to Divi > Theme Builder, and click on “Add Global Header.” This will open up the Divi Builder, where we can start constructing our custom header. The default Divi header is great, but it has its limitations. By creating a custom global header, you can fully control the design and functionality.
Once you’re in the Divi Builder, you’ll see a blue section with a prompt to add a row. Let’s start by adding a row with two columns. In the left column, we’ll place a menu module, and in the right column, we’ll place a button module.
In the left column, click on the grey “+” icon to add a module, and select the “Menu” module. This module will display the navigation menu of your choice. You can choose your main menu from the drop-down menu in the content settings. By default, it will link the logo to the homepage.
To customize the menu, go to the “Design” tab. Here, you can change the layout, text color, and menu styles. Since our header will have a dark background, I’ll choose a light-colored logo and white text for the menu items. Additionally, I’ll make the text semi-bold to stand out more.
Next, let’s remove any background from the menu module. Under the “Content” tab, scroll down to “Background” and click the trash can icon to remove the default white background.
Now, let’s add our logo. Under the “Content” tab, you’ll find the “Logo” option. Upload your logo, and make sure it’s sized appropriately. If your logo appears too large, you can adjust its size under the “Design” tab by navigating to “Sizing” and reducing the “Logo Width.”
To ensure the menu text is visible against our dark background, go to “Menu Text” under the “Design” tab and change the text color to white. We’ll also set a hover color for the text by clicking the hover icon (a little arrow) and selecting a vibrant green color.
In the right column, click the grey “+” icon and select the “Button” module. We’ll name this button “Mega Menu” or any name of your choice. In the “Content” tab, you don’t need to add a link since we’ll use custom CSS to trigger the Mega Menu.
Under the “Design” tab, click on “Alignment” and center the button in the column. Next, enable “Use Custom Styles for Button” to start customizing the button. Set the button text color to white and the background color to transparent. Reduce the button text size to about 12 pixels and make it uppercase.
To match the hover effect of our menu text, click the hover icon under “Button Text Color” and select the same green color. This will ensure consistency in our design.
Now that we have our menu and button in place, let’s adjust the overall design of the header. First, set the background color of the entire section to a dark shade (e.g., #242424). Click on the blue section tab, go to “Background,” and choose your color.
Next, we need to adjust the padding to make the header more compact. Go to “Design” > “Spacing” and set the padding to 0 for both the top and bottom. Then, select the row settings (green tab) and go to “Design” > “Sizing.” Set the row width to 100% and the max width to 100% as well. This will ensure the header spans the full width of the screen.
If there’s still too much padding, go to the row settings again, navigate to “Design” > “Spacing,” and set the top and bottom padding to around 10 pixels. This should give you a sleek and compact header design.
Now comes the exciting part – integrating the Mega Menu into our global header. If you followed yesterday’s tutorial, you should have your Mega Menu saved in your Divi library. If not, make sure to check the link in the description for a step-by-step guide on creating and saving your Mega Menu.
To add the Mega Menu to our header, click on the grey “+” icon to add a new section, and select “Add From Library.” Choose your saved Mega Menu section. This will place the Mega Menu directly under our header section.
Since we don’t want the Mega Menu to be visible by default, we need to hide it using a bit of CSS. Go to the section settings for the Mega Menu, click on the “Advanced” tab, and add the following CSS class: `etb-content-2`. This class will be used to control the visibility of the Mega Menu.
Next, we need to link our button to the Mega Menu so that it appears when the button is clicked. Go to the button module settings, navigate to the “Advanced” tab, and add the following CSS class: `etb-button-2`.
To make this work, we need to add a bit of JavaScript. Exit the Divi Builder and go to your WordPress dashboard. Navigate to Divi > Theme Options, and scroll down to the “Integration” tab. In the “Add code to the <head> of your blog” section, paste the following JavaScript:
<script>
jQuery(document).ready(function($){
$(‘.etb-button-2’).click(function(){
$(‘.etb-content-2’).toggleClass(‘et-show’);
});
});
</script>
This script will toggle the visibility of the Mega Menu when the button is clicked.
After adding the JavaScript, save your changes and go back to the Divi Theme Builder. Make sure all your changes are saved, and then exit the builder. Refresh your website to see the new global header in action.
When you click the button in your header, the Mega Menu should pop up, displaying the full-screen, full-width menu we created. The menu will be fully responsive, working seamlessly across all devices. To test this, press F12 to open the developer tools and switch to different device views.
There you have it – a custom global header with a dynamic Mega Menu that enhances the functionality and aesthetics of your Divi-powered website. This feature not only improves navigation but also adds a modern and professional touch to your site. It’s a fantastic way to engage your visitors and provide a seamless browsing experience.
Thank you so much to the viewer who asked the excellent question that inspired this tutorial. If you enjoyed this video, please give it a thumbs up, ring the bell, comment, share, and subscribe to our YouTube channel. It’s always great to hear from you. If you have any more questions or need further assistance, feel free to leave a comment below. I’ll do my best to help you out or even create another demo video like this one.
For more tutorials on enhancing your Divi site, check out our “Divi Menu Effects” playlist. It covers various tips and tricks to make your website stand out. Until next time, this has been Jamie from System22 and web-design-and-tech-tips.com. 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.
Divi Supreme: The Ultimate Divi Theme Enhancement
The world of web design is continually evolving, and it’s essential for designers and developers to stay ahead of the curve to create stunning websites. Divi, by Elegant Themes, is a popular choice among web professionals due to its flexibility and user-friendly approach to building websites. However, even with its robust features, there’s always room for improvement and innovation. That’s where Divi Supreme comes in, offering an array of enhancements and features that make it the best addition to the Divi theme. In this 1000-word exploration, we’ll delve into the many reasons why Divi Supreme is the ultimate companion for Divi users.
**1. Extensive Module Library:**
One of the standout features of Divi Supreme is its extensive library of modules that seamlessly integrate with Divi. These modules add new functionalities and design elements to your Divi-powered websites, allowing you to create unique and dynamic layouts with ease. Whether you’re looking to add advanced buttons, creative image effects, or interactive content, Divi Supreme has a module for almost every need.
**2. Time and Effort Savings:**
Divi Supreme’s modules are designed to streamline your workflow. They are highly customizable and require little to no coding knowledge. This means you can save significant time and effort while building websites. No more struggling with custom CSS or third-party plugins. With Divi Supreme, you can achieve complex designs and functionalities in a fraction of the time it would normally take.
**3. User-Friendly Interface:**
While the Divi theme itself is known for its user-friendly interface, Divi Supreme takes it a step further. The plugin seamlessly integrates into the Divi Builder, ensuring that the learning curve is minimal. Whether you’re a seasoned Divi user or just starting, you’ll find Divi Supreme’s interface intuitive and easy to navigate.
**4. Advanced Design Possibilities:**
Divi Supreme doesn’t just add more modules; it enhances your creative possibilities. The plugin’s modules are designed with modern web design trends in mind, allowing you to stay at the forefront of design without the need for extensive custom development. Features like shape dividers, gradient text, and sticky elements open up a world of design opportunities.
**5. Frequent Updates and Improvements:**
The team behind Divi Supreme is committed to providing the best user experience. This commitment is reflected in their regular updates and improvements. They actively listen to user feedback and continually add new modules and features to ensure Divi Supreme remains cutting-edge.
**6. Great Support and Community:**
Divi Supreme boasts a strong and active user community. The plugin’s developers are responsive to user inquiries and offer excellent support. Plus, the Divi Supreme community is filled with creative individuals who often share tips, tricks, and solutions, making it a valuable resource for Divi users.
**7. Seamless Integration:**
Another key advantage of Divi Supreme is its seamless integration with Divi. You won’t encounter compatibility issues or conflicts with the Divi theme, ensuring a smooth and hassle-free experience. This level of integration is crucial for maintaining the stability of your website.
**8. Performance Optimization:**
Divi Supreme is designed with performance in mind. The plugin’s code is optimized for speed, ensuring that your websites load quickly and provide a smooth user experience. This performance boost is crucial for SEO and user retention.
**9. Cost-Effective Solution:**
When you consider the time and effort saved using Divi Supreme, it becomes a cost-effective solution for web designers and developers. Instead of investing in multiple third-party plugins or spending hours on custom coding, you can achieve your design goals more efficiently with Divi Supreme.
**10. Responsive and Future-Proof:**
As the web evolves, so do design standards and user expectations. Divi Supreme’s modules are built with responsiveness in mind, ensuring that your websites look and function flawlessly on all devices. This future-proofing is essential for staying relevant in the ever-changing landscape of web design.
In conclusion, Divi Supreme is undeniably the best addition to the Divi theme. Its extensive module library, time-saving features, user-friendly interface, advanced design possibilities, frequent updates, and excellent support make it an indispensable tool for web professionals. By seamlessly integrating with Divi and optimizing performance, Divi Supreme empowers designers and developers to create stunning websites that meet the demands of modern web design. Whether you’re a seasoned Divi user or just getting started, Divi Supreme is a game-changer that will take your web design projects to the next level.
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
Have a great website design
It is essential to have a great website design nowadays as so many people tend to shop and find services online. It is also very important to have a responsive website design as almost 50% of today’s browsing is done on smartphones and tablets, I certainly use mine for browsing. If a customer navigates to your site and they have to pinch and zoom to be able to read and navigate, the chances are that they will move away to another site and you will almost certainly lose that customer.
A well-developed website can convey trust and credibility, making people to buy from you, or support you. Whether you are a professional looking for a job, or an expert in your industry: you can show that to the whole world by having a custom responsive website.
Be sure to check out our playlist page to find the help you need!
Latest YouTube Videos
