Follow us

Make a Call-to-Action Bar for Mobile Phones | Divi Soup

Want to learn how to use CSS with Divi?

Our CSS & Divi Beginner Course is now open for enrollment!

R40: How to Make a Call to Action Bar for Mobile Devices

by | Apr 22, 2018 | Recipes | 13 comments

This recipe was inspired by a question in the Divi Soupies Facebook group. A group member wanted to know how they could make a call to action button in the menu work better on phones and tablets. As you know, our beautiful menu buttons look great on desktops, but are hidden in the mobile menu. Not cool!

In this recipe, I am going to show you how to create a call to action bar (button) for mobile devices. As you can see in the image above, this is a bit different from Michelle’s sticky button recipe, and is not recommended for desktops. While I call this a bar, it really is more of a button – and that is how you should treat it. Unlike promo bars, this cannot be closed or hidden, and should only contain a few words at most (that means 3).

So let’s get that button/call to action out of hiding on mobile devices!

 

Ingredients

 

The latest version of the Divi Theme from Elegant Themes.

An active child theme. You are going to edit the header.php file, so a child theme is imperative if you don’t want the effect overwritten when updating Divi. If you don’t have a child theme, you can create one free at https://elegantmarketplace.com/child-theme-maker.

 

Cooking time

 

This should take around 15 minutes.

 

Preparation

 

The first thing we need to do is get our header.php file set up correctly. If you don’t have a header.php file in your child theme, simply duplicate the one in the Divi theme. Once you duplicate the header.php file, you can add it to your child theme via FTP or SFTP.

 

Method

 

Let’s start by adding the following code below the logo_container div in your child theme’s header.php file (located around line 255):

<?php echo wp_nav_menu( array( 'theme_location' => 'ds-mobile-cta', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'ds-mobile-cta', 'echo' => false ) );?>

 

Next, we will add some code to the child theme’s functions.php file to create a new menu item in WordPress that will be called Mobile CTA. Copy and paste the following into the functions.php file:

// register a new menu item for mobile cta
add_action( 'after_setup_theme', 'ds_register_menu' );
function ds_register_menu() {
register_nav_menu( 'ds-mobile-cta', __( 'Mobile CTA') );
}

Once you are finished doing that, you can create your bar. Go to Appearance > Menus in the WordPress dashboard and create a new menu – you can label it anything you’d like. In this tutorial, I have named it Mobile CTA. This will be your bar. You can use an existing page, post, or custom link. Just like any button in the menu, you can also add icons with Font Awesome.

Next, add a CSS class to your new menu item. This option is hidden by default, so click on Screen Options at the top of your window and select the appropriate checkbox (see below) if you don’t have it enabled.

Once enabled, add the CSS class “ds-cta-bar” to that field (see below). In Menu Settings at the bottom, be sure to select Mobile CTA and then save the menu.

Finally, add some CSS to your child theme stylesheet. Open the style.css file in your child theme. Copy and paste the code below and save.

/***************** Mobile CTA Bar ******************/
/****************** By Divi Soup *******************/

/* Disable the CTA Bar on desktops */
@media only screen and (min-width: 1101px){ ul#ds-mobile-cta { display:none!important;}
} /* Change the value to 769px to show on phones only */

/* CTA Bar */
@media only screen and (max-width: 1100px) { /* Change the value to 768px to show on phones only */
ul#ds-mobile-cta a {
    background: #273c75; /* Bar Color */
  color: #FFF; /* Change Text Color */
  font-size: 20px; /* Change Text Size */
  font-weight: bold; /* Change Text Weight */
  bottom: 0;
    position: fixed;
    width: 100%!important;
    left: 0;
  display: block;
  padding: 24px 18px;
  text-decoration: none;
  text-transform:uppercase;
  text-align:center;}

  
/* Move the footer up */
#main-footer {
    padding-bottom: 55px;}
}

/************** End - Mobile CTA Bar ***************/
/****************** By Divi Soup *******************/

The code is commented so you can change the color, font, and even hide it on tablets too.

 

Ready to Serve

 

That’s it! Now you’ll have a nice call to action bar that will appear at the bottom of your site on mobile devices.

 

If you found this recipe helpful, please share it, leave a comment, and/or subscribe to the Divi Soup newsletter to get more Divi Soup resources delivered to your email inbox. For even more awesomeness, join the Divi Academy Club! Check it out at https://divi.academy/membership/.

Cheers!
Shay

Shay Mann has been designing websites for over 13 years, and has worked as a freelance web designer specializing in Divi since 2015. He currently works under Michelle Nunan assisting with Divi Soup & Divi Academy, and operates his own Divi web design & support service. Shay lives in Virginia Beach, VA with his two black kitties, Diva & Shadow.

Related Posts

Enter your details below to get notified of the launch and early bird pricing

You have successfully joined the waitlist!

Pin It on Pinterest

Sharing is caring

Share this post with your friends!