In today’s digitally-driven world, where mobile devices are the primary medium for accessing the web, ensuring that your Divi website is not just visually appealing but also user-friendly on all screen sizes is paramount. As website owners, we often find ourselves facing the challenge of adapting our designs to suit the ever-expanding array of devices used by our audience.

One such challenge lies within the realm of WordPress website development, particularly for those utilizing the Divi theme by Elegant Themes. While Divi offers a plethora of customization options to create stunning websites, there are instances where achieving the desired layout on mobile screens can be a bit elusive.

One common scenario is the default header alignment on mobile screens. By default, Divi headers are left-aligned on smaller devices, which may not always align with your design vision or provide the best user experience. However, fear not! With a few simple tweaks and the power of CSS, you can effortlessly transform the default Divi header into a sleek and centered masterpiece on mobile screens.

In this guide, we’ll walk you through the step-by-step process of turning the Divi default header into a centered header specifically tailored for mobile screens. Whether you’re a seasoned web developer or a novice enthusiast, this tutorial will equip you with the knowledge and tools needed to elevate the mobile experience of your Divi-powered website.

Read More: How To Secure WordPress/Divi Website Without Plugins

Implementing a Centered Divi Header for Mobile Devices

To start customizing your Divi header for mobile screens, the first step is to adjust the spacing. We’ll add some padding to the top and bottom of the header. This padding will help create some breathing room around the header elements, making it more visually appealing and easier to interact with on smaller devices. Let’s dive into the process of adding this padding to our header bar to lay the foundation for our centered design on mobile screens.

.et_header_style_left #main-header {
       padding: 20px 0;
   }

Next, we need to arrange the logo so it sits atop the menu icon, and we want it to be right in the middle.

.et_header_style_left  header#main-header .logo_container,
.et_header_style_left .logo_container {
       position: relative;
       height: auto;
       max-height: 100px;
       padding: 0;
       text-align: center;
   }

Next, we’ll adjust the top navigation container (#et-top-navigation) by removing the padding on the left and top edges, essentially making it span the full width of the screen. This modification ensures that our centered header looks seamless and visually appealing on mobile screens.

.et_header_style_left #main-header div#et-top-navigation {
       padding-left: 0 !important;
       padding-top: 0;
       width: 100%;
   }

Next, we’ll focus on aligning the mobile menu container, which is identified as #et_mobile_nav_menu. This step is crucial for ensuring that our centered Divi header looks seamless and functions smoothly on mobile screens. By correctly aligning the mobile menu container, we can guarantee a better user experience for visitors accessing our website from smartphones or tablets. So, let’s delve into the process of properly adjusting the alignment of #et_mobile_nav_menu to achieve the desired centered layout.

.et_header_style_left #et_mobile_nav_menu {
       float: none;
       position: relative;
       margin-top: 20px;
   }

Now, let’s focus on styling the background bar that houses the “Select Page” option, the menu hamburger icon, and the dropdown menu. We’ll work on giving it a fresh look and feel to enhance the overall appearance of your website.

.et_header_style_left #main-header .mobile_nav {
        padding: 5px 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: rgba(0,0,0,.05);
        text-align: left;
    }

Read More: Animate Your Web Page Using Divi Scroll Effects

Now, let’s focus on displaying the words ‘Select Page’. This step is crucial for guiding users on mobile devices to navigate through your website effectively. By prominently featuring the ‘Select Page’ text, visitors will easily understand how to access different sections of your site. This small but significant detail can greatly enhance the usability and overall experience for mobile users, ensuring they can find the content they’re looking for with ease.

.et_header_style_left .mobile_nav .select_page {
        display: inline-block;
    }

And align the hamburger menu

.et_header_style_left .mobile_menu_bar {
        position: absolute;
        top: 2px;
        right: 5px;
    }

To ensure seamless navigation, we’ll address one final touch: adjusting the dropdown menu’s position. By adding a top offset, we’ll strategically position it directly beneath the header bar, optimizing accessibility and user experience.

.et_header_style_left .et_mobile_menu {
        top: 53px;
    }

Combining the CSS snippets together and wrapping them in a Media Query 

@media all and (max-width: 980px){
    /* add padding to header bar */
    .et_header_style_left #main-header {
        padding: 20px 0;
    }
    /* change logo positioning and set its height */
    .et_header_style_left  header#main-header .logo_container,
    .et_header_style_left .logo_container {
        position: relative;
        height: auto;
        max-height: 100px;
        padding: 0;
        text-align: center;
    }
    /* set width and remove top and left padding of #et-top-navigation */
    .et_header_style_left #main-header div#et-top-navigation {
        padding-left: 0 !important;
        padding-top: 0;
        width: 100%;
    }
    /* apply necessary styles to mobile menu container */
    .et_header_style_left #et_mobile_nav_menu {
        float: none;
        position: relative;
        margin-top: 20px;
    }
    /* style the "Select Page" bar */
    .et_header_style_left #main-header .mobile_nav {
        padding: 5px 10px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: rgba(0,0,0,.05);
        text-align: left;
    }
    /* display the "Select Page" words */
    .et_header_style_left .mobile_nav .select_page {
        display: inline-block;
    }
    /* align the menu "hamburger" */
    .et_header_style_left .mobile_menu_bar {
        position: absolute;
        top: 2px;
        right: 5px;
    }
    /* add top offset to dropdown menu */
    .et_header_style_left .et_mobile_menu {
        top: 53px;
    }
}

Read More: What are the Divi Breakpoints and Media Queries

To apply these CSS changes, you have a few options. You can either navigate to the Custom CSS section within your Divi theme settings by going to Divi -> Theme Options and pasting the provided CSS there. Alternatively, you can access the Theme Customizer and locate the Additional CSS section to add the CSS there. If you prefer working with a child theme, you can add the CSS to the style.css file of your child theme. Once you’ve added the CSS to your preferred location, remember to save the changes. That’s it! Your Divi header will now be centered on mobile devices, enhancing the overall user experience.

Conclusion:

In conclusion, by following the step-by-step guide outlined in this tutorial, you’ve learned how to transform the default Divi header into a centered masterpiece specifically tailored for mobile screens. We’ve addressed various aspects of header customization, from adjusting spacing and aligning elements to styling the mobile menu for a seamless user experience.

With the power of CSS and the flexibility of Divi, you now have the tools and knowledge to elevate the mobile experience of your Divi-powered website. Whether you’re a seasoned web developer or a novice enthusiast, implementing these changes will ensure that your website shines brightly on every device, leaving a lasting impression on your visitors.

Remember, the key to successful website design is not just visual appeal but also usability across different screen sizes. By centering your Divi header on mobile screens, you’re not only enhancing the aesthetics of your website but also improving its accessibility and user-friendliness.

So, go ahead and apply these CSS changes to your Divi theme, whether through the Custom CSS field, Theme Customizer, or child theme style.css file. With just a few simple tweaks, you can make a significant impact on how your website is perceived and experienced by mobile users. Here’s to creating stunning and user-friendly websites with Divi!

Read More: How To Add Shape Dividers In Divi