How to Add an Animated Google Style Button to Main Menu Navigation in Divi

We can notice a huge rise of websites that use Call To Action (CTA) buttons added to the main menu navigation. In many cases this buttons are animated, they are pulsing, changing colors… All this to get visitor attention quickly and provide easy access to contact page or premium content. In this tutorial I will show you how to add a Google style animated CTA button that slides in after scroll.

1

Add code to header.php

1. Open header.php file located in your child theme folder.
* If you do not have header.php file in you child theme folder, then copy it from parent Divi theme and paste to your child theme folder.

2. Add the following code below logo_container div:

2

Add custom js

Create js folder in your child theme root directory and create divicustom.js file inside it. Add below code and save:

3

Edit functions.php file

In this step we need to enqueue js file that we created in previous step and register function. Open functions.php and add the following code:

4

Add CSS styles

Add below code to style.css located in you child theme folder:

5

Create New Menu

1. Go to Appearance/Menus and create new menu.

2. Add menu item you would like to have animated.

3. Add class shop-cta shop-float-in and select Shop Menu below, Save.
* If you do not see CSS Class field then it means it is not enabled. To fix it click on Screen Options located in top right corner and select CSS Classes

6

Edit Primary Menu

1. Go to Appearance/Menus and select Primary Menu

2. Add class shop-show-hide-desktopmobile to the item you want to have animated

7

Edit Customizer Settings

Primary Menu Bar:

1. Got to Divi/Theme Customizer

2. Select Header & Navigation/Primary Menu Bar

3. Select Make Full Width option and set Menu Height to 52

Fixed Navigation Settings:

1. Select Header & Navigation/Fixed Navigation Settings

2. Set Fixed Menu Height to 52

That’s it and thank you for your attention! If you enjoy this tutorial please let us know in the comments below.

Nilesh Mokani

Nilesh Mokani

Lead Developer

Create amazing websites in minutes.

Polygon is a multipurpose Premium Divi Child Theme perfect for creatives & professional agencies.

17 Comments

  1. David Leger

    Cool little snippet. I’m looking forward to trying it out.

    Reply
  2. Mary

    Cool, but instruction #2 is jargon to those who don’t understand code like I do 🙁

    Reply
    • Maciej Ekstedt

      Hi Mary. Sorry to hear that. It’s true, editing functions.php file requires some coding knowledge. Please open chat window on our site and we will see how can we help you make it working.

      Reply
  3. Marshall

    Had to go through dozens of websites for reaching this post again. Last time it was when you shared about this on the fb divi group 🙂

    Want to try this on a new site and see how it goes…

    Reply
  4. Dehn Merrill

    Another great tutorial and code freebie. Thank you for the clean and comprehensive work!

    Reply
  5. Jean-Ghislain

    Another awesome tutorial. I may use it on my next creation as a replacement of the bottom contact sticky button.
    Thanks a lot for your share, keep up the great work;)

    Reply
  6. Matt K

    Awesomeness!!! Can we utilize this button for anything else or does it have to be Shop only. Also the fixed 52px menu height, it that required to be that number? Can it be changed?

    Reply
    • Maciej Ekstedt

      Hi Matt. You can use whatever link you want. Also height can be changed 🙂

      Reply
  7. Anurag Gupta

    Hey !

    Great Tutorial.

    But, it doesn’t work with Divi 3.0.84 update.

    I guess, it could be because of ” changes made in class/id name “.

    If you can update and mention at the start itself, that this snippet support DIVI 3.0.XX version would be great help.

    Thanks
    Anyways

    Reply
    • Maciej Ekstedt

      Hi Anurag, thanks for the comment. We have checked and this tutorial works fine with the latest WP and Divi 3.0.86. You must be missing something.. Please follow all steps carefully and let me know how it goes.

      Reply
      • Anurag Gupta

        Hey Maciej

        Its working !

        Must be my mistake..

        Thanks a lot !

        Reply
  8. Christian van 't Hof

    Hi! I love this tutorial! I discovered now that I got an error/warning in my child theme because of the header.php.

    Notice: Undefined variable: menuClass in /home/public/sites/www.aardingcarlifts.nl/wp-content/themes/AardingCarLifts/header.php on line 220

    Any idea what it could be?

    Reply
    • Maciej Ekstedt

      Hi Christian. Do you use our tutorial on your website and is this something that is causing this issue? I visited your site and cannot see animated button and also no error in the console.

      Reply
      • Christian van 't Hof

        The website is aardingcarlifts.nl, which is a website of a client.

        Reply
        • Maciej Ekstedt

          The only thing I can see “Failed to load resource: the server responded with a status of 400 ()” and it seems to be referring to google fonts – https://imgur.com/a/8uah3

          You may experiencing caching issue. Make sure you clear all caches and see if error you mentioned still persists. BTW. Nice website. This button looks awesome there!

          Reply
  9. Carlos A S Jr

    I do not understand anything about Child Theme and honestly I have no idea of ​​the importance of having one. The question is. Can I do this tutorial on a site without Child Theme?

    Reply

Submit a Comment

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

Pin It on Pinterest