10. Let's Celebrate!

Nu firar vi!You are a star!

 

6.2 Create a sticky header menu in the Divi Theme Builder

  • Your progress:

We are now going to create the global header in the Divi theme builder. We will start with the basic menu, with the logo on the left and the menu links on the right. We will also create a menu item with a dropdown submenu and link it to our subpages on the website. Additionally, we’ll add an external link that will open in a new tab. I’ll guide you through how to achieve these steps.

As you scroll down, you can see that this header is sticky. It changes slightly when you scroll, so it doesn’t take up as much space from the actual body content. Next, we will add a top bar with social media icons on the left, a nice hover effect, and a call-to-action button on the right.

To begin, I’ve added some content to the homepage to make it possible to scroll the menu and see how it behaves when it’s sticky. First, we need to fix the menu items, as there are some links that shouldn’t be up there. We’ll start by going to our WordPress dashboard and navigating to “Appearance” and then “Menus.” We will create our main menu, and I’ll name it “Main Menu” and designate it as the primary menu. After creating the menu, you can add pages from your website. To do this, choose “View All,” select all the pages, change their order according to your preference, and create submenu items for categories. Then, save the menu.

Now, if we preview the site, you can see that the menu looks better with the correct links. However, the last link should be an external link. To add an external link, use the “Custom Links” option. Input the URL for your custom link and the link text, and then add it to the menu. Ensure that the external link opens in a new tab by enabling the “Open link in a new tab” option in the screen settings.

Now, let’s design the menu. In the Divi Theme Builder, create the global header and build it from scratch. Start by inserting a single row with one column, and then add a menu module to the row. In the content tab, select the main menu we created earlier. Choose the logo for your website, and make sure it’s visible against the background. You can also customize the menu by adding elements like a shopping cart icon or a search icon.

In the background tab, change the background color to match your design. Adjust the menu text’s font, color, and size according to your preferences. Ensure the menu text font style is set to “All Caps” for consistency. You can customize the hover effect by setting the menu text color for the hover state.

Next, make sure the menu links are right-aligned, creating the desired layout with the logo on the left and the links on the right. Save your changes, and then, to make the menu sticky, go to the section settings, choose the “Scroll Effects” tab, and set the sticky position to “Stick to Top.” This ensures that the menu sticks to the top as you scroll down the page.

To achieve the shrinking effect when scrolling, edit the row settings and adjust the width and maximum width, making the menu more discreet when sticky. Reduce the padding for the row to create a cleaner look.

Additionally, customize the submenu by removing the blue line in the dropdown menu. In the design settings for the menu module, go to the dropdown menu color and set it to transparent.

Once you’ve made these changes, save your design, and you’ll have a sticky menu with a shrinking effect as you scroll.

Now, let’s add a top bar with social media icons and a call-to-action button. Create a new section with two columns: one for the social media icons and the other for the call-to-action button. Customize the social media icons by adjusting the background color, links, and the hover effect. You can also style the social media icons to match your design preferences.

To add a divider between the top bar and the menu, set a border style in the section settings. Customize the border width and color to achieve the desired look.

For the call-to-action button, insert a button module in the second column, customize the link text, and set the link to either an external URL or an internal page. You can style the button to fit your design, including changing the text color, background color, border radius, font, and spacing.

Ensure that the button aligns to the right to achieve the layout you desire. Set the button’s hover effect and padding to make it look more appealing. You can also link the logo to the home page.

After making these customizations, save your design, and your website’s global header will include a sticky menu with a shrinking effect, a top bar with social media icons and a call-to-action button, and linked logo. Your menu is now ready to be implemented on your website.

You can export this design layout as a JSON file, and a link to download it is available in the description below.

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo