wooassist

<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/8qS40pLylcc?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p>This plugin will add two widget areas on top of the main header. The purpose of adding these widget areas is to easily add navigations and notices on the top.</p>
<p>This plugin is built to work only for the <a href="https://wordpress.org/themes/storefront" rel="ugc">Storefront theme</a>.</p>
<p><strong>How to use:</strong></p>
<ul>
<li>Like any other widget areas, you can easily add widgets by navigating to Widgets page under appearance on your WordPress dashboard.</li>
<li>You can also add and modify widgets while on the Customizer page.</li>
<li>You can easily customize the background, text, and link colors in the Customizer. You can find the settings under <em>Top Bar</em> section.</li>
</ul>
<p><strong>Notes:</strong></p>
<ul>
<li>The Top Bar widget areas works similar to Storefront’s footer widgets areas. When only the <em>first widget</em> area has widgets, it’s width will be at 100% and the <em>second widget</em>  area will not show up.</li>
<li>We’ve added styling support for custom menu widgets. It’s look and feel is similar to the main menu and its sub-menu styles.</li>
<li>This plugin doesn’t support the sticky header option added by the <em>Storefront Designer extension</em>.</li>
</ul>


Storefront Top Bar

Adds two widgets areas on top of the header of Storefront.

wp-centrics

<h3>Add sticky top and bottom bars with multiple banners</h3>
<p>Top Bar Notification & Sticky Banners is the most flexible and configurable, yet simple, plugin for displaying bars at the top or bottom of your site. Easily add promotions, announcements, messages, or banners to your site for your visitors.</p>
<p>Compatible with most themes, it includes 7 different sticky methods. Add image banners, announcements, and messages. Easily create your own styles with its built-in style editor using your own fonts.</p>
<p>⚡Demo here: <a href="https://wordpress.org/plugins/top-bar-notification-sticky-banners/?preview=1" rel="ugc">Run live preview</a></p>
<h3>🚀 Powerful & easy to use</h3>
<ul>
<li><strong>Top and bottom bars</strong>: with unique or multiple banners on each, dismissible or not at your convenience.</li>
<li><strong>Unlimited banners</strong>: When there is more than one banner per bar, they run animated.</li>
<li><strong>Optional dismiss</strong>: Each bar can have a dismiss button, stored in a cookie only in this case.</li>
<li><strong>Automatic font detection</strong>: Use your theme fonts directly in your banner styles.</li>
<li><strong>Banner preview mode</strong>: After installation, adjust everything and preview all on the front end while logged in as an admin. Bars remain hidden from other users until you switch to real mode.</li>
</ul>
<h3>✅ Highly theme compatible & configurable</h3>
<ul>
<li><strong>Configurable sticky behavior with 7 modes</strong>: Always visible, only at the top, scroll-based reactions, and more.</li>
<li><strong>Wide range of configurable options</strong>: Adjust plugin behaviors, fonts, embed CSS, fine-tuning, speed variables, and more.</li>
<li><strong>Highly theme compatible</strong>: Includes a custom script to prevent overlapping between the sticky top bar and your sticky theme header (optional, with three distinct modes).</li>
<li><strong>Use your own shortcode</strong>: Add any shortcode inside the banner content, it will be replaced.</li>
</ul>
<h3>❤️ WYSIWYG styles & banner edition</h3>
<ul>
<li><strong>User-friendly style editor</strong>: Create unlimited bar styles with live WYSIWYG previews directly in the wp-admin side.</li>
<li><strong>Flexible banner content</strong>: Add responsive image banners or text banners with or without a CTA button, with your custom styles in each. Live preview.</li>
</ul>
<h3>🏁 Lightweight</h3>
<ul>
<li><strong>Coded for performance</strong>: Built-in CSS compiler+minifier: one minfied CSS file.</li>
<li><strong>Minimal footprint</strong>: Unique 5 KB JavaScript file & lightweight banner HTML.</li>
<li><strong>No more embeds</strong>: Use your own fonts: no extra fonts embed.</li>
<li><strong>Only when requested</strong>: Only embedded when some bar is displayed.</li>
</ul>
<h3>🔍 Auto-detection of your own fonts</h3>
<ul>
<li>Out of the box, Top Bar Notification & Sticky Banners plugin will <strong>auto-detect your theme fonts</strong>. It will be available in the style editor.</li>
<li>You can <strong>force re-detection</strong> in Top Bar NSB > Settings > Fonts.</li>
<li>You can force admin font load for <strong>accurate preview</strong>.</li>
<li>You can add fonts that auto-detect can’t see.</li>
<li>However, <strong>you can’t</strong> use this plugin to add new fonts in your website.</li>
</ul>
<h3>🍭 Use your own CSS</h3>
<p>There is more than one way to customize:<br />
1. You can add a <strong>custom class</strong> on each banner.<br />
2. You can <strong>add inline-styles</strong> on each style edition page (with live preview)<br />
3. You can add <strong>your own CSS</strong> in the advanced settings</p>
<h3>🔨 Shortcodes for responsive</h3>
<p>Use this shortcodes in the banner content editor:</p>
<pre><code>[topbarnsb-desktop] (your desktop image or text content) [/topbarnsb-desktop] 
[topbarnsb-mobile] (your mobile image or text content) [/topbarnsb-mobile]
</code></pre>
<p>…in any banner you need.</p>
<h3>✅ Ready for Advanced users & Theme developers</h3>
<p><strong>Template system with overrides for theme developers</strong>: override whole plugin CSS, banner style CSS or the banner HTML as you need.</p>
<p>To do it, copy the plugin /templates folder into your theme, and rename the folder to /topbarnsb. Then  edit the files as you need.</p>


Top Bar Notification & Sticky Banners

Add sticky top and bottom bars with multiple banners: text banners with optional buttons/CTAs, or responsive images.

Storefront Top Bar vs Top Bar Notification & Sticky Banners