Swap the Order of the Secondary Header Contact Info and Menu

Last modified Aug 4, 2021
Difficulty Beginner
Language CSS

Watch Tutorial

Transcript:

Hey everybody, David here from Divi Space. By default, the Divi Theme displays the social media icons, phone number and email on the left side – and the secondary menu items are on the right. But what if you want to reverse this alignment? Today I’m gonna show you how to do just that! Let’s get started.  Just paste the code to your website. There are a few ways you can do this. The best practice is always to add the code to your child theme.

Alternatively, you can add the code to the theme customizer and that’s how I will do it here. Let’s go the theme customizer and choose the ‘additional CSS’ tab. Paste the code. That’s it! Easy, right?! Was this video helpful? Let us know in the comments and don’t forget to hit like and subscribe because there’s more to come! Thanks for watching! We’ll see you in the next tutorial.

CSS

#top-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap; }

#top-header  .container:before, #top-header .container:after {
  display: none; }

#top-header #et-info, #top-header #et-secondary-menu {
  float: none !important;
}

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 3.29.3 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment! :)

And subscribe to our youtube channel because there’s more to come!

License: This snippet is created by Divi Space, September 2019. Licensed under the GNU General Public License, no warranty; click here for details.

Your Comments

2 Comments

  1. DJ

    This code did not work for me 🙁

    Reply
    • <div class="apbct-real-user-wrapper">
    <div class="apbct-real-user-author-name">Anna Kurowska</div>
    <div class="apbct-real-user-badge" onmouseover="apbctRealUserBadgeViewPopup('apbct_trp_comment_id_444474');" onmouseout="apbctRealUserBadgeClosePopup(event);">
        <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img" style="align-self: center;">
        <div class="apbct-real-user-popup apbct-trp-popup-desktop" id="apbct_trp_comment_id_444474">
            <div class="apbct-real-user-title">
                <p class="apbct-real-user-popup-header">The Real Person!</p>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
                </div>
                <div class="apbct-real-user-popup-content_row">
                    <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                    <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
                </div>
            </div>
        </div>
    </div>
    <div class="apbct-real-user-popup apbct-trp-popup-mob" id="apbct_trp_comment_id_444474">
        <div class="apbct-real-user-title">
            <p class="apbct-real-user-popup-header">The Real Person!</p>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/real_user.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Author <b>Anna Kurowska</b> acts as a real person and verified as not a bot.</span>
            </div>
            <div class="apbct-real-user-popup-content_row">
                <img src="https://wpzone.co/wp-content/plugins/cleantalk-spam-protect/css/images/shield.svg" class="apbct-real-user-popup-img">
                <span class="apbct-real-user-popup-text">Passed all tests against spam bots. Anti-Spam by CleanTalk.</span>
            </div>
        </div>
    </div>
</div>

      I will be happy to help if you can leave a link to your site 🙂

Submit a Comment

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

Next snippet Divi Mobile: Collapse Submenus
Previous snippet Remove Bullet Points From Divi Footer