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

PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
This form collects the information you enter here so that we can provide you with exciting news in the future. Read our Privacy Policy to learn how we manage and protect your submitted information.
Hi there! We’d love to help you out. Leave us a message and we’ll get back to you as soon as possible.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your message has been sent.
We will get back to you in the earliest convenience.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resell either on its own or as a part of a project. Distribution of source files is not permitted.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout
Win Free Marvel!
Join our mailing list and get a chance to win 1 of 5 free licenses for Marvel Theme! All subscribers will also receive a huge discount code on the product release date!
    
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL3JrZmZsbXp3VUpvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==