Source: https://divicake.com/blog/divi-transparent-header/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How to create a Transparent Header Menu in Divi By Divi Cake·29 September 2024·Updated 19 August 2026·6 min read How to create a Transparent Header Menu in Divi We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [Before Converting Heading to a Transparent Menu in Divi](https://divicake.com#before-converting-heading-to-a-transparent-menu-in-divi) - [Enabling Page Builder to Edit the Header in Divi](https://divicake.com#enabling-page-builder-to-edit-the-header-in-divi) - [Editing the Header Background in Divi Page Builder](https://divicake.com#editing-the-header-background-in-divi-page-builder) - [Adjusting Menu Text Color and Size in Divi](https://divicake.com#adjusting-menu-text-color-and-size-in-divi) - [Checking Tablet Responsiveness in Divi](https://divicake.com#checking-tablet-responsiveness-in-divi) - [Optimizing Mobile Settings for Enhanced User Experience](https://divicake.com#optimizing-mobile-settings-for-enhanced-user-experience) - [Final Results of Implementing a Responsive Transparent Header in Divi](https://divicake.com#final-results-of-implementing-a-responsive-transparent-header-in-divi) - [Conclusion](https://divicake.com#conclusion) Creating a transparent and responsive header in [Divi](https://divicake.com/go/divi/) can greatly improve your website’s aesthetic and user experience. This step-by-step tutorial will guide you through transforming a standard Divi header into a sleek, Transparent Header Menu that works seamlessly on all devices, including desktops, tablets, and smartphones. As mobile traffic continues to increase, it’s essential to have a header that adjusts smoothly to different screen sizes for a polished and contemporary look. We will cover everything from enabling the [Divi Page Builder](https://divicake.com/blog/what-is-divi-wordpress/) to customizing the menu’s design, ensuring it remains fully responsive across all platforms. ## Before Converting Heading to a Transparent Menu in Divi In the screenshot below, you can see our header before converting it to a transparent menu. The header’s background color is blue, and the text color is white. Additionally, when scrolling, the menu disappears because the Headeris not set to sticky. However, by enabling the transparent header [sticky option](https://divicake.com/blog/a-look-at-the-new-divi-sticky-options/), the overall appearance becomes much more visually appealing. Divi header screenshot showing a blue background and white text before conversion to a transparent sticky menu, highlighting the current issue of the menu disappearing while scrolling. Read More: [Divi Headers with Slide-in Design Layout Pack](https://divicake.com/go/divi-headers-with-slide-in-design-layout-pack/) ## Enabling Page Builder to Edit the Header in Divi In this step, we will enable the Page Builder to access and edit the header, allowing you to create a beautiful, transparent, and responsive menu. Ensure that you are on the [WordPress dashboard](https://divicake.com/blog/wordpress-tutorial/) and scroll down to Divi. Click on Theme Builder, as shown in the image below. The Page Builder will open within the WordPress dashboard. You will see various header options in the Theme Builder, but don’t get confused. Even though it looks like there are multiple headers, they all represent a single header used across multiple pages. If the header is green and labeled Global Header, it means it is applied to multiple pages or templates. If a header is black and labeled Custom Header, it is specific to a particular page. Without getting confused, click on Global Header, as shown in the image. This will open your header in the Page Builder for editing. Accessing the Theme Builder in Divi to enable the Page Builder for editing the Global Header, featuring options for creating a transparent and responsive menu across multiple pages. Read More: [Upgrade Your Site’s Look with Our Stylish Divi Headers Pack](https://divicake.com/go/divi-headers-pack/) ## Editing the Header Background in Divi Page Builder Once the Divi Page Builder is open, hover your mouse over the left corner of the header. A blue-colored settings button will appear, as shown in the screenshot below. Click the Settings Icon, and the section settings will open. Next, click on the [Content Tab Setting](https://divicake.com/blog/getting-started-with-divi-content-settings/) and scroll down to select Background. The background settings will then open. Locate the color option (as shown in the image) and select the transparent color. Once you have made the changes, click the green checkmark button to save. Editing the header background in Divi Page Builder by accessing the settings icon, navigating to the Content Tab, and selecting the transparent color option to enhance the header’s visual appeal. Read More: [Enhance Your Website with Our Divi Headers with Slide-in Design Layout Pack](https://divicake.com/go/divi-headers-with-slide-in-design-layout-pack/) ## Adjusting Menu Text Color and Size in Divi After changing the header background to transparent, you may notice that the menu text becomes invisible if the text color is set to white, as it happened with our menu. To resolve this, we need to change the menu text color and size. Hover your mouse over the menu, and the menu settings will appear in dark black, as shown in the image below. Click the Settings Icon on the menu, and the Menu Settings will open at the top of the module. Click on the [Design Tab](https://divicake.com/blog/getting-started-with-divi-design-settings/), then scroll down to find Menu Text as indicated in the screenshot. Once you click on it, the menu text settings will appear. The first option is Active Link Color, which controls the color of the menu text after it’s clicked. Select a color of your choice. The next option is Menu Text Color, which is our main focus. We selected black, but you can choose a color that fits your design. After changing the text color, scroll down to explore more options like Font Size, Letter Spacing, and Font Style. You can adjust these one by one. For now, we’ll save the changes. Change your Divi menu text color and size in the menu settings after making the header background transparent, ensuring better visibility. Read More: [Complete Your Website Design with Our Divi Headers & Footers Pack](https://divicake.com/go/divi-headers-footers-pack/) ## Checking Tablet Responsiveness in Divi In this step, we will check Tablet Responsiveness, a key factor in ensuring your header adapts smoothly across different devices. To verify if your header is tablet responsive, hover your mouse over the Three Dotted Icon and click on the Tablet Icon. Once your desktop switches to Tablet View, hover over the Menu Module Setting, as shown in the screenshot, and click on it to modify the Menu color for tablet view. After the Menu Settings open, click on the Design Tab and scroll down to find the Drop Down Menu Option. Here, you can change the color settings for Tablet View, just as we did previously. You may also explore other settings one by one to customize them as needed. Ensuring tablet responsiveness in Divi helps create a seamless user experience across various devices. Read More: [How to Create a Sticky Header with Divi’s Sticky Options](https://divicake.com/blog/divi-sticky-header-guide/) ## Optimizing Mobile Settings for Enhanced User Experience In this step, we focus on Mobile Settings, which are even more important than Desktop and Tablet settings. Mobile devices today generate significantly more traffic compared to desktops and tablets due to their easy accessibility. The settings for mobile are similar to those for tablets, and we will also demonstrate how to make adjustments in Mobile View. Hover your mouse over the three-dotted button below and click on the mobile icon, as shown in the screenshot. Once your header switches to Mobile View, click on the Menu Setting (which is highlighted in black), then select the Design Tab. From there, click on the Drop Down Menu, just as you did in the tablet settings, and proceed to adjust the color, size, and other design elements as needed. Mobile settings play a vital role in user engagement, especially as Read More: [Turn Divi Default Header Into Centered Header On Mobile Screens](https://divicake.com/blog/turn-default-divi-header-into-centered-header-on-mobile/) ## Final Results of Implementing a Responsive Transparent Header in Divi In the image below, We showcase the stunning result of our efforts, the header’s background color matches the body, which is white. However, as we scroll, the header adopts the blue color of the body, proving that the header has become transparent. The transparency allows the body’s background color to show through, as the header no longer has its own color. If you’ve followed the steps and achieved the same results, congratulations! You have successfully implemented a responsive transparent header. Transparent header implementation in Divi allows the body background color to show through, proving the success of the responsive design. Read More: [How to Make Custom Divi Header Fixed or Sticky](https://divicake.com/blog/how-to-make-custom-divi-header-fixed-or-sticky/) ## Conclusion By following this guide, you’ve successfully created a transparent and responsive header in Divi. This not only improves your site’s aesthetics but also ensures a seamless user experience across all devices, including desktops, tablets, and smartphones. The transparent header allows your design to stand out while blending effortlessly with the page’s content, creating a sleek, modern look. In today’s mobile-first world, having a responsive and adaptive header is crucial for maintaining engagement and accessibility. Congratulations on implementing a feature that enhances both the form and function of your website, giving users an optimal browsing experience. Now your website is equipped to handle the growing demand for mobile-friendly design, ensuring it remains visually appealing and easy to navigate on any platform. Read More: [20 Unique Divi Header and Footer Layout Design Packs in 2024](https://divicake.com/blog/header-footer-layout-packs/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)