Per Søderlind

The CSS Flags plugin / library for WordPress loads a dynamicaly created CSS with responsive flags.
Note: 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
You can <a href="https://soderlind.no/css-flags-plugin-for-wordpress/" rel="nofollow ugc">view the flags at my site</a>
Sample CSS:
<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>
The total CSS file size is 4 MB, and you don’t want to send all that data back to the users, so you must use one of the following filters in your plugin or theme.
css_flags_countries: Load flags for one or more countries
<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>
css_flags_regions: Load the flags for one or more regions. You can choose between europe, oceania, africa, asia, northamerica, southamerica and middleeast.
<pre><code>add_filter('css_flags_regions', function() {
 return array('europe'); //europe, oceania, africa, asia, northamerica, southamerica, middleeast
});
</code></pre>
css_flags_exclude: 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
<pre><code>add_filter('css_flags_exclude', function() {
 return array('eu');
});
</code></pre>
css_flags_cachetime: Change the cache time, default it’s 7200 (60x60x2 = 2 hours)
<pre><code>add_filter('css_flags_cachetime', function() {
 return 172800; // 2 days
});
</code></pre>
If you must (but you shouldn’t), you can load all the CSS flags using the following:
<pre><code>add_filter('css_flags_countries', function() {
 return array('all'); // load all country flags (don't it's 4MB)
});
</code></pre>
More information at <a href="https://github.com/soderlind/css-flags/" rel="nofollow ugc">GitHub</a>
<h4>Credits</h4>
The original CSS file is from http://www.phoca.cz/cssflags/. If you only need the CSS file, grab it there.

CSS Flags library

More than 250 vector based flags for WordPress

WebFactory

The <a href="https://wpsticky.com/" rel="nofollow ugc">WP Sticky</a> Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages “sticky” as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu.
You just need to know how to pick the right selector for the element you want to make sticky, and you need to be sure it’s a unique selector. Sometimes a simple selector like “nav”, “#main-menu”, “.menu-main-menu-1” is enough. Other times you will have to be more detailed and use a more specific selector such as “header > ul:first-child” or “nav.top .menu-header ul.main”. If you don’t like messing with any code check out out the visual element picker in <a href="https://wpsticky.com/" rel="nofollow ugc">WP Sticky PRO</a>.
<h4>Features</h4>
<ul>
<li>Any element can stick: although common use is for navigation menus, or header the plugin will let you pick any unique element with a name, class or ID to stick at the top of the page once you scroll past it. Use it for sticky widget, sticky sidebar, sticky header, sticky menu, sticky header, sticky call-to-action box, sticky banner ad, etc. Need to make <a href="https://wpsticky.com/" rel="nofollow ugc">multiple elements sticky</a>? Check out WP Sticky PRO.</li>
<li>Positioning from top: optionally, you can add any amount of space between the sticky element and the top of the page, so that the element is not always stuck at the “ceiling” of the page.</li>
<li>Enable for certain screen sizes only: optionally, you can set a minimum and/or maximum screen size where the stickiness should work. This can be handy if you have a responsive site and you don’t want your element to be sticky on smaller screens, for example.</li>
<li>Enable only on some pages: sometimes you don’t want the element to be sticky on the entire site. <a href="https://wpsticky.com/" rel="nofollow ugc">WP Sticky PRO</a> gives you the option to pick posts, pages, categories, tags and CPTs where you don’t want the element to be sticky.</li>
<li>Push-up element: optionally, you can pick any other element lower on the page that will push the sticky element up again (for example a sidebar widget).</li>
<li>Admin Bar aware: checks if the current user has an Admin Toolbar at the top of the page. If it has, the sticky element will not obscure it (or be obscured by it).</li>
<li>Z-index: in case there are other elements on the page that obscure or peek through your sticky element, you can add a Z-index easily.</li>
<li>Legacy Mode: in 2.0, a new method of making things sticky was introduced. In Legacy Mode, the old method will be used. See FAQ for details.</li>
<li>Dynamic Mode: some issues that frequently appear in responsive themes have been address by adding a Dynamic Mode (Legacy Mode only). See FAQ for details.</li>
<li>Debug Mode: find out possible reasons why your element doesn’t stick by switching on Debug Mode, and error messages will appear in your browser’s console.</li>
</ul>
Having problems with SSL? Moving a site from HTTP to HTTPS? Install our free <a href="https://wordpress.org/plugins/wp-force-ssl/" rel="ugc">WP Force SSL</a> plugin. It’s a great way to fix all SSL problems.
<h4>GDPR compatibility</h4>
We are not lawyers. Please do not take any of the following as legal advice. 
Sticky does not track, collect or process any user data on the front end or in the admin. Nothing is logged or pushed to any 3rd parties. We also don’t use any 3rd party services or CDNs. Based on that, we feel it’s GDPR compatible, but again, please, don’t take this as legal advice.

Sticky Menu & Sticky Header

Sticky Menu or Sticky Header sticks elements at the top of the screen when you scroll, or create a floating sticky menu or fixed widget.

CSS Flags library vs Sticky Menu & Sticky Header