How to add a call-to-action button next to the Divi hamburger menu

by | Mar 20, 2017 | Divi Snippets, Divi Tutorials | 3 comments

We all know how important it is to have a Call To Action (CTA) on your website. A good place to put a call to action button is in your main menu. It’s clickable on every page and one of the first places people start to look when they visit your website.

If you want your call-to-action to be always visible you can’t use the Divi fullscreen and slide in menu. Which is a shame because they are pretty cool. We combined the fullscreen Divi menu with a call-to-action button next to the hamburger menu icon on this website. We get a lot of question on how we did that. So in this tutorial I will walk you through the steps of adding a responsive call to action button next to the Divi hamburger icon.

How to add a CTA button next to the Divi hamburger menu

In less then five minutes your call-to-action button will be ready to receive some clicks. Here we go!

Add the following code to Divi > Theme Options > Integrations > Add code to the < head > of your blog:

<script>
jQuery(function($){
// Add your CTA link and text
$("#et-top-navigation").prepend($("<a class='bite-cta' href='your-link-url'>YOUR CTA TEXT</a>"));
});
</script>

To style your call-to-action button and align it next to the Divi hamburger menu I added a class. I used “bite-cta” in above code, but you can change it to anything you like. Don’t forget to change ‘your-link-url’ in the url you want you CTA to link to and ‘YOUR CTA TEXT’ in your desired button text.

Give styling to the call-to-action button next to the slide in or fullscreen menu icon

On the frontend your hyperlink will now be aligned above the hamburger icon and look like a normal link. Now we will add CSS to style your button and align it next to the hamburger icon. If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Divi>Theme Options. At the bottom of the page (ePanel) you can add the CSS in the Custom CSS window.

The first part of CSS is for styling and aligning the button:

.bite-cta {
    border: 1px solid #04bf37;
    border-radius: 30px;
    color: #fff;
    padding: 4px 12px;
    position: absolute;
    right: 70px;
    top: calc(50% - 16px);
}

You can change the border, border-radius and color. You can also add a background color, but I saved that for the second part. You can play with the padding to make the button larger of smaller. To align the button you can change the ‘right’ and ‘top’ value.

The second part of CSS is for changing the styling on scroll.

.et-fixed-header .bite-cta {
    background: #04bf37 none repeat scroll 0 0;
    border: 1px solid #04bf37;
}

To make my call-to-action button more attention-grabbing I change the color on scroll. In above code I added a background color for the fixed header. You can also change other elements of the button like text- and border-color.

Give your Call-to-action button a hover effect.

We like cool stuff, so we need a hover effect. Here’s the CSS for styling the call-to-action hover effect.

.bite-cta:hover {
    background: #19A537 none repeat scroll 0 0;
}

In above code I added a background color hover effect. You can also change other elements of the button like text- and border-color.

Responsive alignment for your Slide in or fullscreen menu CTA Button.

To make your call-to-action button look good on all screens and keep it nicely aligned next to the hamburger menu icon we need add the following css to your stylesheet.

@media all and (max-width: 767px) {
.bite-cta {
    right: 40px;
}}

In above code we change the right alignment for screen smaller then 767px.
In above code I added a background color hover effect. You can also change other elements of the button like text- and border-color.

All together the CSS-code to add to your child theme will look like this:

.bite-cta {
    border: 1px solid #04bf37;
    border-radius: 30px;
    color: #fff;
    padding: 4px 12px;
    position: absolute;
    right: 70px;
    top: calc(50% - 16px);
}

.et-fixed-header .bite-cta {
    background: #04bf37 none repeat scroll 0 0;
    border: 1px solid #04bf37;
}

.bite-cta:hover {
    background: #19A537 none repeat scroll 0 0;
}

@media all and (max-width: 767px) {
.bite-cta {
    right: 40px;
}}

Bonus tip for an awesome fullscreen or slide in Divi menu

Make the Divi fullscreen or slide in menu even more awesome with the Free Divi Header Extension by Elegant Themes.

If you have any questions please feel free to ask them in the comments.

Share This