Fixed Call to Action Bar

If you find this tweak helpful:

Beginners

Tweaking Elegant Themes involves creating a child theme and editing PHP and CSS files within a text editor. If you have never done this you may want to read our guide on creating a child theme. All tweaks are written with the assumption that you have a default installation of your theme.  Any tweaks or changes you may have previously made to your theme could affect the outcome of the tweaks on this site. All tweaks should be tested before applying to a live site. 

I happened on this tweak by chance. A client wanted a CTA button that really grabbed your attention for a non-profit website looking to increase donations. Originally I created a horizontal bar below the header and accidentally gave it a class with fixed positioning. But when I scrolled down and saw the results, I got really excited.

The bar sits behind the header. As you scroll down the page, it's revealed and sticks to the top of the window. I added some transparency to give it some visual appeal and was really happy with how it turned out.

You can view the demo here.

Here's how to add it:

PHP

Copy your header.php file into your child theme folder /themes/Divi-child/header.php

Near line 37 find these lines of code:

<body <?php body_class(); ?>>
<div id="page-container">

Copy and paste the following code below the lines above:

    <div id="top-cta">
<a href="#">Your continued <span class="cta_gray">support</span> is greatly appreciated</a>
<span class="blurb_button">
<a class="et_pb_promo_button cta" href="#">
Donate
</a>
</span>
</div>

Replace the link placeholder # with the URL of your choosing. Save and close the header.php file.

CSS

Copy and paste the following lines into your styles.css file:

#top-cta {
background-color: #39B2EB;
background-color: rgba(57, 178, 235, .9);
text-align: center;
padding: 5px 0 5px;
text-transform: uppercase;
position: fixed;
top: 0;
width: 100%;
z-index: 9997;
}

#top-cta a {
color: #fff;
font-size: 28px;
font-weight: 700;
display: inline-block;
}

#top-cta a span.cta_gray {
color: #dfdfdf;
text-shadow: 1px 1px 1px #5a5a5a;
}

#top-cta .blurb_button {
padding-left: 20px;
}

#top-cta a.cta {
background-color: #ff9900;
padding: .4em .8em;
}

#top-cta a.cta:hover {
background-color:#FFAD33;
}

/*-------------------[768px]------------------*/
@media only screen and ( max-width: 980px ) {

#top-cta {
padding: 10px 0 10px;
}

#top-cta a {
font-size: 20px;
}

}

/*-------------------[480px]------------------*/
@media only screen and ( max-width: 767px ) {

#top-cta {
padding: 7px 0 7px;
}

#top-cta a {
font-size: 18px;
}

#top-cta .et_pb_promo_button {
padding: 4px 15px;
}

}

/*-------------------[320px]------------------*/
@media only screen and ( max-width: 479px ) {

#top-cta {
padding: 5px 0 5px;
line-height: 1.2em;
}

#top-cta a {
font-size: 16px;
}

#top-cta .et_pb_promo_button {
padding: 2px 10px;
}

}

Save and close this file. Make sure you go into the Epanel and disable the fixed navigation bar, otherwise the header will sit on top of the CTA bar. That's it. You can obviously change the text and play around with the colors. You might have to play around with the padding and font-size if your logo is bigger or smaller than the default Divi logo. I've added responsive styles so as the header shrinks, so should the CTA bar.

Since we're adding this to the header.php file, the bar will be displayed on all pages and posts. If you only want it on certain pages, you can wrap the PHP code in this:

<?php if ( is_page( 'about' )) { ?>

#---- insert the original code above ----#

<?php } ?>

Two or more pages:

<?php if ( is_page( 'about' ) || is_page( 'home')) { ?>

#---- insert the original code above ----#

<?php } ?>

Replace about and home with the pages you want the fixed bar displayed and they will only show on those pages. If you don't want it on certain pages, it would probably be easier to just use CSS:

.page-id-54 #top-cta {display: none;}

 

If you decide to use this on only one page, and want to keep the fixed navigation bar on other pages, you can add the following CSS to prevent the fixed navigation from hiding the CTA bar on the page you have it set to display. Just change the page number.

.page-id-258 #main-header.et-fixed-header {
position: absolute;
top: 0;
}

    11 Comments

  1. Hi!

    This is just what I needed for my client site. Just that I would show the fixed CTA bar only in tablets and mobile, not in desktop. It is possible?

    Hermann

    April 15, 2016

    • You could limit the CSS using media queries.

      /*——————-[768px]——————*/
      @media only screen and ( min-width: 981px ) {

      #top-cta {display: none !important;}

      }

      Brad (admin)

      May 19, 2016

  2. Hi there,
    Thanks for sharing this tips.
    Any idea on how to apply this to “add to cart” buttons of Product pages with DIVI + Woocommerce?

    franck

    May 18, 2016

    • You just want the button itself to stick to the top of the page?

      Brad (admin)

      May 19, 2016

  3. Hi and thank you for the tip, it is very helpful! I would like to receive Weekly Tweaks!

    Elena

    May 24, 2016

  4. Thank you very much for share it, there is a possibility to “slide in” the call action bar, just like eleganthemes web site?

    Edwin Chavarriaga

    September 28, 2016

  5. Hi, any idea why button in CTA only worked when I scroll down the page? It won’t work if I don’t scroll down the page.

    Thanks

    Adam Lallana

    December 15, 2016

    • Hi Adam. The button should only reveal itself after you scroll down the page by design. If you want it to be visible all the time, you’ll need to change the position of your header to be below the button container.

      Brad (admin)

      March 20, 2017

  6. Two Words – “YOU ROCK!”
    Thanks for all the great tips and tricks…

    Noah

    December 20, 2016

  7. Hi, i have tried this but does not work for me. I am currently using the standard divi theme but sorting a child theme. I tested it in divi theme would it make a difference?

    James

    June 25, 2017

Post a Reply

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