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.
- You will need Divi Theme by Elegant Themes installed.
- All operations are made on Divi Child Theme files. If you did not create child theme yet then it is a good moment to create one and start building website of your dream. More informations about creating child theme can be found here:
How To Create A Child Theme, And Why You Should Be Using One
1
Add code to header.php
- 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. - Add the following code below logo_container div:
| 1 2 3 |
<?php echo wp_nav_menu( array( 'theme_location' => 'divishop', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'divishop-menu', 'echo' => false ) );?> |
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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$divishop = jQuery('#divishop-menu'); if ( $divishop.length ) { jQuery(window).scroll(function() { var scroll = jQuery(window).scrollTop(), objectPosition = $divishop.offset().top; var divishopwidth = jQuery('#divishop-menu').width(); if (scroll > 400) { jQuery('body').addClass("et_divishop_cta"); } else { jQuery('body').removeClass("et_divishop_cta"); } }); } |
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:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' ); function my_enqueue_assets() { wp_enqueue_script('divicustom', get_stylesheet_directory_uri() . '/js/divicustom.js', array(), '', true); } add_action( 'after_setup_theme', 'b3_shop_register_menu' ); function b3_shop_register_menu() { register_nav_menu( 'divishop', __( 'Shop Menu') ); } |
4
Add CSS styles
Add below code to style.css located in you child theme folder:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*Menu Slide in effect*/ @media only screen and (min-width: 981px) { .shop-show-hide-desktopmobile {display:none !important;} ul#top-menu li.menu-item:nth-last-child(2) {padding-right:0px !important;} ul#divishop-menu {background: #fff;float: right;font-size: 15px;list-style: none;margin-right: -200px;margin-left: 20px !important;right: 0;z-index: 99;} ul#divishop-menu li {background: #fff;float: left;display: inline-block;font-size: 14px;text-transform:uppercase;} ul#divishop-menu a {color: #666666;display: block;line-height: 16px;padding: 24px 18px;text-decoration: none;font-size: 13px;font-weight: 600;} .et_divishop_cta .shop-float-in {overflow: hidden;transition: all 2.9s ease-out 0s !important;} .shop-float-in {transition: all 2.9s ease-out 0s !important;} ul#divishop-menu .shop-float-in a:hover {text-decoration: none;} ul#divishop-menu li.shop-cta{background: #1e88e5; position: relative;} ul#divishop-menu li.shop-cta:hover{background: #0055a5;} ul#divishop-menu li.shop-cta a{color: #FFFFFF;padding:25px 50px;} .et_divishop_cta #access-menu{margin-right: 25px;transition: all .6s ease-out 0s !important;} .et_divishop_cta ul#divishop-menu {margin: 0 -30px 0 0;} #main-header .et_menu_container,#divishop-menu,#access-menu,#et-top-navigation,.et_fixed_nav #et-top-navigation{ transition: all .4s ease-out 0s !important;} } @media only screen and (max-width: 980px) { ul#divishop-menu {display:none;} } |
5
Create New Menu
- Go to Appearance/Menus and create new menu.
- Add menu item you would like to have animated.
- 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
- Go to Appearance/Menus and select Primary Menu
- Add class shop-show-hide-desktopmobile to the item you want to have animated
7
Edit Customizer Settings
Primary Menu Bar:
- Got to Divi/Theme Customizer
- Select Header & Navigation/Primary Menu Bar
- Select Make Full Width option and set Menu Height to 52
Fixed Navigation Settings:
- Select Header & Navigation/Fixed Navigation Settings
- 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
Lead Developer
Create amazing websites in minutes.
Polygon is a multipurpose Premium Divi Child Theme perfect for creatives & professional agencies.
Cool little snippet. I’m looking forward to trying it out.
Cool, but instruction #2 is jargon to those who don’t understand code like I do 🙁
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.
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…
Another great tutorial and code freebie. Thank you for the clean and comprehensive work!
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;)
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?
Hi Matt. You can use whatever link you want. Also height can be changed 🙂