How To Move The Divi Menu Module Logo From Top Centered To Left On Scroll Tutorial by Pee Aye Creative

How To Move The Divi Menu Module Logo From Top Centered To Left On Scroll

This tutorial will show you how to change the placement of your Divi menu logo from top center by default to the left on scroll.
Menu Logo Move GIF min

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Add The Divi Menu Module

The first step of course is to add the Divi Menu module to your layout. You can add this anywhere, and the effect will always work on scroll.

Optional: Create Theme Builder Template

But I would assume that the most common place to use this would be in a Theme Builder header template. If you don’t already have this created, just go to the WordPress Dashboard>Divi>Theme Builder and click “Add Global Header” in the first template.

Optional: Set The Section To Fixed Or Sticky Position

The best way to see the changes when the users scrolls is to set the section which contains the menu module to a fixed or sticky position. This means that when the website visitors scrolls, the logo will change position in the Menu module from top center to left. 

You have a few options here. You can go to the Advanced tab of the section to the Position toggle and set the position to Fixed. Or you can open the Scroll Effects toggle instead and set the Sticky Position to Stick to Top.

Add A Logo Image

Now go ahead and edit the template and add the Divi Menu Module to your layout. Then open the Menu settings and  add a logo image.

add logo to Divi menu module

Set Layout To Centered

This tutorial is all about changing the Divi Menu logo position from top centered to left on scroll. So we need to set the default layout as “Centered” and then later we will add some code to change this position when the visitors scrolls. You can find this setting in the Design tab in the Layout toggle.

make the Divi Menu module layout centered

Add Custom CSS Class

In order to only target this particular Menu module on the site, we need to set a custom CSS class in the module. This same class will also be used in the jQuery snippet and CSS snippet. So go go to the Menu settings>Advanced tab>CSS ID & Classes toggle and add “pa-menu-logo-position” to the CSS Class input field.

add custom class to Divi menu module

Add The jQuery Code

Now that the Divi Menu module is properly set up, we can proceed with the code portion of this tutorial. Since our goal is not possible by default, we need to use two types of code in order to achieve it. But it is easy, I will provide all the steps you need.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<script>

jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();
        if (scroll > 80) {
            jQuery(".pa-menu-logo-position").removeClass("et_pb_menu--style-centered");
            jQuery(".pa-menu-logo-position").addClass("et_pb_menu--style-left");
            jQuery(".pa-menu-logo-position").addClass("pa-onscroll");
        } else {
            jQuery(".pa-menu-logo-position").addClass("et_pb_menu--style-centered");
            jQuery(".pa-menu-logo-position").removeClass("et_pb_menu--style-left");
            jQuery(".pa-menu-logo-position").removeClass("pa-onscroll");
        }
    });

});

</script>

What Is The Code Doing?

A class is created in the Menu module by default depending on which layout option is chosen. Our code is adding the left-styled class and removing the centered style class so that we can get the left alignment and

It is also adding one more class “pa-onscroll” to the menu. This is a custom class which will be used to add the CSS styling only when the scroll happens.

If you want to increase or decrease the distance of the scroll effect you can change the “80” value which can be seen in the code.

Add The CSS Code

The next step is to add some CSS that correpsondes to the new “pa-onscroll” class that is being added when the website visitor scrolls. 

If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.

/*place everything in a single row and align them vertically*/

.pa-menu-logo-position.pa-onscroll .et_pb_menu_inner_container {
	display: flex;
	align-items: center;
}


/*position the menu navigation items to right*/

.pa-menu-logo-position.pa-onscroll .et_pb_menu__wrap {
	justify-content: flex-end;
}


/*position everything if the search bar is enabled*/

.pa-menu-logo-position.pa-onscroll .et_pb_menu__search-form {
	display: flex;
	justify-content: flex-end;
}


/*restrict the width of the search bar if it is used*/

.pa-menu-logo-position.pa-onscroll .et_pb_menu__search-input {
	max-width: 400px;
}

Last updated Nov 19, 2022 @ 11:15 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

22 Comments

  1. Shaun

    This is a great tutorial, thank you. However, I found an error in the code, all pa-onscroll should be pa_onscroll

    Reply
  2. Dave

    Hi Nelson, After the scroll, I want to reduce the size of the logo, How to do that. Please help?

    Reply
    • Hemant Gaba

      Hi Dave,

      In the URL that you mentioned, the header is not fixed for any screen then I guess there will be no point in reducing the logo size as it will be out of the viewport when you will scroll the page.

      Please let me know if there is another URL where you facing this issue.

      Reply
  3. Genee Leonard

    Hi there, is there any way to make the transition smoother from centered to left alignment, the logo jump to quick? Any CSS that would assist here?

    Reply
    • Hemant Gaba

      Hey Genee,

      Could you please share the website URL for me to investigate further?

      Reply
  4. Kieron

    Hey great article. I’d like to make the height of the menu area transition smoothly rather than jump instantly. I guess I would use CSS transition but I’m not sure which element/selector to add that to. Can you help? I would share the URL but the site is currently hidden and in dev. (the site listed below is the current old one)

    Reply
    • Hemant Gaba

      Hey Kieron,

      I have checked the website and I think you have not placed any code yet to change the logo placement on scroll. I would request you to place the code first and then share the URL and I’ll fix the transition after analyzing the issue that is happening because on my end everything is working fine.

      Reply
  5. Pat

    Thank you for your great tutorials Nelson, appreciated!
    Is there a way that once you scroll and the logo changes position, to swap out the logo for another one?
    I want to use a large logo for the center position then a simplified smaller one on scroll.

    Reply
  6. Stanisław

    Unfortunately, this doesn’t work for me. I copied all steps verbatim, and the menu looks worse than it used to.

    I don’t know, maybe the new version of Divi doesn’t support that? I’ve had different kinds of bugs all throughout the page I’ve been building.

    Reply
    • Hemant Gaba

      Hey Stanislaw,

      I have checked the code and it’s working fine on my end. Could you please share the URL and list the issues that you are facing thought-out so I can check all of them and provide you with a couple of solutions in order to fix things?

      Reply
  7. Nenad Vracaric

    Is it possible to achieve this effect of moving the logo from the top center to the left on using Theme Customizer (Old Header). I would be very grateful if you could help me achieve this with some additional code. I tried something but the search box appears on my mobile, and I just want the logo on the left and the search icon
    and the hamburger icon on the right, and on the desktop the effect you achieved with Divi Theme Builder. I know you prefer Theme Builder, but for some inexplicable reason I really like Old Header in Customizer. Thank you very much in advance and for all the wonderful, best regards!

    Reply
    • Hemant Gaba

      Hey Nenad,

      By default, we need to place the logo in the center and as we don’t have the access to your website so could you please go to the Theme Customizer and set the header style to centered or centered inline and then comment again so that I can check the scenario and provide you the snippet?

      You can do that on the staging site and provide us that link and after finalizing everything, you can push it live.

      Reply
      • Nenad Vracaric

        This is a link to a staging site https://www.nvsolutions.rs/1650970621473/.
        If you need anything else, please tell me. Sorry I didn’t answer right away. I took a few days off for the holidays.

      • Hemant Gaba

        Hey Nenad,

        This link is also taking me to a page where I need to place the credentials. Please remove this step so I can check the page.

  8. Nenad Vracaric

    Hi Hemant,
    I did what you asked. It’s OK now, I checked the staging site. In a post from April 21, I was wrong when I said that the search box appears on the mobile version. The “Select page” box actually appears. I want to remove that, so that the mobile version looks the same as on the current site, and also on the desktop to achieve the effect that you achieved. Best regards!

    Reply
  9. Nenad Vracaric

    Hi Hemant,
    if it will be of any help to you, I found an example of how I would like the mobile version to look. This is the website: http://andrewkingslow.co.uk/. One difference is that on this site the inline logo is on the desktop version, but the result achieved on the mobile is more or less what I would like to achieve at https://www.nvsolutions.rs/1650970621473/. I tried to figure out how they achieved it, but I didn’t quite succeed. Limited knowledge :). Best regards.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Nenad,
      I noticed you have had 5 comments on this post, but are not using the threaded comments, which makes it really difficult to follow and reply. In the future, please reply in the threaded comment. Also, just to clarify, we are not a free customization service. Hemant is only supposed to help with issues related to the code in the tutorial, but it would be crazy for us to provide free customization service to our blog readers. Thanks for understanding.

      Reply
      • Nenad Vracaric

        I’m sorry to bother you. Thank you for the precise clarification. I wish you all the best.

  10. Ken Brayton

    Strictly speaking syntactically, the last two closing brackets should end with a semi-colon like this:

    }
    });
    });

    This won’t prevent the script from executing, but it will throw a warning with any decent JavaScript editor.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

0

Your Cart