Adding a utility or announcement bar above the Avada theme header. I shall display this bar on entire site pages except sales page. So I added following PHP snippet in the functions.php file of Avada child theme.
|
1 2 3 4 5 6 7 8 9 |
<?php //* Do not add this line add_action( 'avada_before_body_content', 'cp_utility_bar' ); function cp_utility_bar() { if( is_page( 123 ) ) // 123 is my sales page ID return; echo '<div class="utility-bar"><a href="ENTER PAGE LINK" target="_self">ENTER YOUR ANNOUNCEMENT HERE.</a></div>' . "\n"; } |
If you look the header.php file of Avada theme, you will get this hook avada_before_body_content. I targeted this hook and adding the bar above the site header markup.
Line no 5-6: I am not displaying the utility bar on my sales page. So I am returning early if page is sales page and bar will not appear on that page. 123 is my sales page ID. You will replace it with your page ID if you’re following this logic. Otherwise you can completely remove the code.
Line no 8: Adding the HTML markup for utility bar.
Later I edit the style.css of Avada child theme and make the full width utility bar. Here is the CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.utility-bar { background: #4982c3; color: #fff; cursor: pointer; font-size: 20px; padding: 12px 20px; text-align: center; } .utility-bar a { color: #fff; } .utility-bar a:hover { color: #ebebeb; } |
THANK YOU! WORKS LIKE A CHARM (AUGUST 2023)
Perfect! Thank you.
Brilliant. Worked like a charm. Thanks for that quick tip.