Notification bar & header settings

Hi,

Thank you for the inquiry.

Instead of adding a widget, you can use this code in the functions.php file to insert another element (a banner, notification bar etc) above the logo container.

add_action("ava_main_header", function() {
    $banner = "<div id='banner'>This is a banner</div>";
    echo $banner;
}, 10);

You can then add this css code to style it a bit.

.responsive #top #header_main #banner {
    width: 100%;
    height: 30px;
    background: red;
    text-align: center;
}

Best regards,
Ismael

Hi,
Please try this code in your functions.php instead:

function custom_top_banner() { ?>
    <script>
(function($){
    $( "<div id='banner'>This is a banner</div>" ).insertBefore( "#header_meta" );
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_top_banner');

and this css instead:

.responsive #top #header > #banner {
    width: 100%;
    height: 30px;
    background: #ffff00;
    color: #000;
    text-align: center;
    z-index: 1;
    position: relative;
}
.html_header_top.html_header_topbar_active.html_header_sticky #top #main > .title_container {
    padding-top: 30px;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
You are getting the jQuery is not defined error, do you have the Enfold Theme Options ▸ Performance ▸ Load jQuery in your footer option enabled?
Try this script instead:

function custom_top_banner() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
    $( "<div id='banner'>This is a banner</div>" ).insertBefore( "#header_meta" );
})(jQuery);
});
</script>
    <?php
}
add_action('wp_footer', 'custom_top_banner');

but use the same css from above.

Best regards,
Mike