-
AuthorPosts
-
January 6, 2023 at 1:27 pm #1377855
Hi,
I want to create at notification bar on top and I have followed the steps to add an extra header widget area, but I can’t seem to find the right css to make it look great. Can you please help me?
I want a notification bar like this https://kriesi.at/documentation/enfold/example-of-a-notification-bar-on-top/ but with my current header and logo settings.January 6, 2023 at 2:05 pm #1377860Hey ditteditte,
Please send us a temporary WordPress admin login and login URL so that we can have a closer look. You can post the details in the Private Content section of your reply.
Best regards,
RikardJanuary 19, 2023 at 2:23 pm #1394352It is comming here.
January 19, 2023 at 7:44 pm #1394450Hi,
Thanks for that. I’ve added the CSS for you, please review your site.
Best regards,
RikardJanuary 20, 2023 at 1:47 pm #1394532Thank you for your effort. But the CSS you added center the logo and menu. I would like the logo flet and the menu right as it is today. I just need some CSS that puts the notification bar at the very top.
In this order:
Notificationbar
secondary menu
Logo left, Menu rightJanuary 22, 2023 at 8:35 pm #1394714Hi,
Thank you for your patience and the link to your site, I changed the function to show the widget in the header that was in your child theme functions.php to this:add_action( 'ava_main_header', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); }
and then I added this function in your child theme functions.php to move the notification area above the top bar:
function add_top_notification_widget() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($) { $('#header_main .widget').detach().insertBefore('#header_meta'); })(jQuery); }); </script> <?php } add_action('wp_footer', 'add_top_notification_widget');
and I added this css to your child theme stylesheet:
/* Notification bar */ .responsive #top #header .widget>div { display: flex; justify-content: center; align-items: center; align-self: center; line-height: 14px; padding: 0 10px; background: gold; width: 100vw; position: relative; z-index: 1; left: 50%; transform: translateX(-50%); } .responsive #top #header .widget>div>p { margin: 0; padding: 7px; } .responsive #top #header .widget { padding: 0; }
and after clearing your cache this is the result:
I was not sure if you wanted it to show because you had the widget hidden, so I hid it when I was done, so please un-hide to check.
Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.