Per Søderlind

<p>The CSS Flags plugin / library for WordPress loads a dynamicaly created CSS with responsive flags.</p>
<p><strong>Note:</strong> CSS Flags is not a standalone plugin/library, To display the flags you will have to <a href="https://github.com/soderlind/css-flags/#example-1" rel="nofollow ugc">add code to your theme</a> using your own plugin or theme functions.php</p>
<p>You can <a href="https://soderlind.no/css-flags-plugin-for-wordpress/" rel="nofollow ugc">view the flags at my site</a></p>
<p>Sample CSS:</p>
<pre><code>.css-flag.sami {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHZlcnNpb249IjEuMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAyMCIgaGVpZ2h0PSIxNTAwIj48cmVjdCB3aWR0aD0iNjQ1IiBoZWlnaHQ9IjE1MDAiIGZpbGw9IiNkODFlMDUiLz48cmVjdCB4PSI2NDUiIHdpZHRoPSIxNDAiIGhlaWdodD0iMTUwMCIgZmlsbD0iIzAwN2EzZCIvPjxyZWN0IHg9Ijc4NSIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjZmNkMTE2Ii8+PHJlY3QgeD0iOTI1IiB3aWR0aD0iMTA5NSIgaGVpZ2h0PSIxNTAwIiBmaWxsPSIjMDAzOGE4Ii8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMCAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAzOGE4IiBzdHJva2Utd2lkdGg9IjgwIi8+PHBhdGggZD0iTSA3ODUsMzEwIGEgNDQwIDQ0MCAwIDAgMSAwLDg4MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZDgxZTA1IiBzdHJva2Utd2lkdGg9IjgwIi8+PC9zdmc+');
    height: 100%;
    width: 134.666666667%;
    background-size: 100% 100%;
}
.css-flag.sami-landscape {
    height: 100%;
    width: 134.666666667%;
}
.css-flag.sami-portrait {
    height: 74.2574257426%;
    width: 100%;
}
</code></pre>
<h4>Usage</h4>
<p>The total CSS file size is 4 MB, and you don’t want to send all that data back to the users, so you <strong>must</strong> use one of the following filters in your plugin or theme.</p>
<p><strong>css_flags_countries</strong>: Load flags for one or more countries</p>
<pre><code>add_filter('css_flags_countries', function() {
    return array('no'); // Array with ISO_3166-1_alpha-2 country codes: http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements
});
</code></pre>
<p><strong>css_flags_regions</strong>: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.</p>
<pre><code>add_filter('css_flags_regions', function() {
    return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});
</code></pre>
<p><strong>css_flags_exclude</strong>: Exclude some countries from the list. This filter must be used in combination with the <code>css_flags_countries</code> or <code>css_flags_regions</code> filters</p>
<pre><code>add_filter('css_flags_exclude', function() {
    return array('eu');
});
</code></pre>
<p><strong>css_flags_cachetime</strong>: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)</p>
<pre><code>add_filter('css_flags_cachetime', function() {
    return 172800; // 2 days
});
</code></pre>
<p>If you must (but you shouldn’t), you can load all the  CSS flags using the following:</p>
<pre><code>add_filter('css_flags_countries', function() {
    return array('all'); // load all country flags (don't it's 4MB)
});
</code></pre>
<p>More information at <a href="https://github.com/soderlind/css-flags/" rel="nofollow ugc">GitHub</a></p>
<h4>Credits</h4>
<p>The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.</p>


CSS Flags library

More than 250 vector based flags for WordPress

POSIMYTH

Sagar Patel

Devang Vachheta

Robert Wattner

dgovea

<p>Create advanced Sticky Headers in Elementor Free or Pro with scroll effects, blur, shrink, hide on scroll & full responsive controls.</p>
<h3>Sticky Header Effects for Elementor – Build Smart, Responsive Sticky Headers</h3>
<p>Sticky headers are essential for improving navigation, branding visibility, and user experience on any modern website. With the <strong>Sticky Header Effects for Elementor</strong> plugin, you can now build sleek, customizable sticky headers that respond to user scroll behavior — all with <strong>Elementor Free or Pro</strong>.</p>
<p>From transparent overlays to animated shrinking effects, dynamic background changes, and blur visuals — this plugin gives you 10+ scroll-based effects that help your header adapt beautifully to your page design.</p>
<p>This plugin is perfect for developers, designers, bloggers, and agencies who want more control over header behavior without writing a single line of code.</p>
<p><strong>This Plugin has been Acquired by POSIMYTH Innovations – <a href="https://stickyheadereffects.com/massive-updates-2-0/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=nexterextension" rel="nofollow ugc">Read Announcement Blog</a></strong></p>
<p><a href="https://stickyheadereffects.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🌐 Visit Website</a>| <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🖼️ Sticky Header Templates Demos</a> | <a href="https://www.youtube.com/c/POSIMYTHInnovations/?sub_confirmation=1" rel="nofollow ugc">📹 Video Tutorials</a> | <a href="https://stickyheadereffects.com/docs?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">📑 Documentations</a> | <a href="https://www.facebook.com/groups/theplus4elementor/" rel="nofollow ugc">👥 Join Community</a> | <a href="https://wordpress.org/support/plugin/sticky-header-effects-for-elementor/" rel="ugc">🤝 Free Support</a></p>
<h3>🔥 Comes with <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">50+ Ready to Import Templates for Elementor Headers with Sticky Header</a></h3>
<h3>👑 10+ Powerful Elementor Sticky Header Effects</h3>
<h3>1. Header Scroll Distance Effect</h3>
<p><strong>Set Scroll Trigger Threshold</strong><br />
Define how far the user scrolls before sticky effects activate. Perfect for precise control over header behavior.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Scroll+Distance&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>2. Transparent Header Background Effect</h3>
<p><strong>Overlay with Elegance</strong><br />
Allow your header to overlay your hero or banner sections with full transparency. Ideal for modern homepage designs.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Transparent+Header+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>3. Dynamic Background Color Change</h3>
<p><strong>Auto Background Switching</strong><br />
Change your header’s background color on scroll to match different sections or maintain contrast.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Background+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>4. Bottom Border Styling Effect</h3>
<p><strong>Subtle Section Separation</strong><br />
Add customizable borders below your sticky header for better definition and clean design.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Bottom+Border+Styling&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>5. Header Shrinking Effect</h3>
<p><strong>Reduce Header Height Dynamically</strong><br />
Shrink the entire header after scrolling to save space and focus attention on the page content.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Header+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>6. Logo Shrinking Effect</h3>
<p><strong>Responsive Logo Transition</strong><br />
Shrink the logo proportionally during scroll, maintaining visual balance and brand presence.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Shrinking&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>7. Logo Color Change Effect</h3>
<p><strong>Switch Logo Color for Better Contrast</strong><br />
Automatically switch to a contrasting logo color on scroll based on background or user behavior.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Logo+Color+Change&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>8. Blur Background Effect</h3>
<p><strong>Add Modern Blur Transition</strong><br />
Enhance the visual flow by applying a subtle blur effect to the background of your sticky header.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Blur+Background&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>9. Hide Header on Scroll Down Effect</h3>
<p><strong>Hide & Reappear on Scroll</strong><br />
Auto-hide the header when scrolling down and show it again on scroll up — great for content-heavy pages.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Hide+Header+on+Scroll+Down&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>10. Above Header Section Effect</h3>
<p><strong>Sync Above Sections Seamlessly</strong><br />
Align your sticky effects with sections above the main header for unified motion and cleaner transitions.<br />
👉 <a href="https://stickyheadereffects.com/sticky-header-for-elementor-templates/?checkbox-sticky_header_effects=Above+Header+Section&utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">View Demo</a></p>
<h3>🔍 Check our other Products</h3>
<p><strong><a href="https://theplusaddons.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 The Plus Addons for Elementor</a></strong> – Nexter Extension works seamlessly with The Plus Addons for Elementor. Get 120+ unique Elementor widgets, Elementor templates, and more. Includes Free Elementor Theme Builder.</p>
<p><strong><a href="https://nexterwp.com/nexter-blocks/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 Nexter Blocks</a></strong> – Nexter Theme works in sync with core Gutenberg. Add 90+ powerful, highly customizable blocks.</p>
<p><strong><a href="https://nexterwp.com/nexter-theme/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 NexterWP Theme</a></strong> – Best & Lightest Starter Theme for WordPress & Elementor.</p>
<p><strong><a href="https://nexterwp.com/nexter-extension?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 Nexter Extension</a></strong> – Power up your WordPress website with 20+ extensions for layout, performance, security & more.</p>
<p><strong><a href="https://uichemy.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 UiChemy – Figma to Elementor Converter</a></strong> – Convert your Figma Templates into live Elementor websites using our <a href="https://www.figma.com/community/plugin/1265873702834050352/" rel="nofollow ugc">Free Figma Plugin</a>.</p>
<p><strong><a href="https://wdesignkit.com/?utm_source=wordpress&utm_medium=readmepage&utm_campaign=StickyHeaderEffects" rel="nofollow ugc">🥇 WDesignKit</a></strong> – 1000+ Templates, Elementor & Gutenberg Widget Builder, Cloud Storage, Widget to Block Converter & More.</p>


Sticky Header Effects for Elementor

Create advanced Sticky Headers in Elementor Free or Pro with scroll effects, blur, shrink, hide on scroll & full responsive controls.

CSS Flags library vs Sticky Header Effects for Elementor