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

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;
}
6
Last updated Jun 17, 2021 @ 12:47 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

2 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

Submit a Comment

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

Recent Posts

Pin It on Pinterest

0

Your Cart