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;
}
14 Comments
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?
April 15, 2016
You could limit the CSS using media queries.
/*——————-[768px]——————*/
@media only screen and ( min-width: 981px ) {
#top-cta {display: none !important;}
}
May 19, 2016
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?
May 18, 2016
You just want the button itself to stick to the top of the page?
May 19, 2016
Hi and thank you for the tip, it is very helpful! I would like to receive Weekly Tweaks!
May 24, 2016
Thank you very much for share it, there is a possibility to “slide in” the call action bar, just like eleganthemes web site?
September 28, 2016
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
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.
March 20, 2017
Two Words – “YOU ROCK!”
Thanks for all the great tips and tricks…
December 20, 2016
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?
June 25, 2017
Hi. How to do when you have a second menu bar on top?
July 19, 2017
If you have a secondary menu you would just need to change the top: 0 to include the height of your top menu:
#top-cta { top: 50px };
April 8, 2018
I want to put this bar on the bottom of the page instead of top, how can I make it happen?
August 16, 2018
This was great info. Any way to get the link to open in a new tab? Thanks.
February 8, 2022