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

Win 1 of 5 free licenses of Polygon Premium Divi Child Theme

Create amazing websites in minutes.

Sign Up To Win

4 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 require 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

Submit a Comment

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

Shares

Pin It on Pinterest

Share This
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.
Get in touch
We are ready to talk about your project. Please leave your message and we will get back to you shortly.
Your Information will never be shared with any third party.
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 email has been added successfully.
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 resale 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 resale “as is”. It is allowed to distribute/sublicense the source files as a part of a larger project.
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