Katsushi Kawamori

<p>Add a fixed menu. The basic menu is at the bottom, but it can also be displayed on the top, left, and right.</p>
<h4>Links</h4>
<ul>
<li>Five link destinations can be specified.</li>
<li>Provides filters for icons, URLs, and text for each link.</li>
</ul>
<h4>Options</h4>
<ul>
<li>Can specify the number of columns from 1 to 5.</li>
<li>Can specify the font size with px, rem and em.</li>
<li>Can specify the menu height with px, rem and em.</li>
<li>Can specify the line height with px, rem and em.</li>
<li>Can specify the padding with px, rem and em.</li>
<li>Can specify their class to remove the overlap for headers and footers overlap.</li>
<li>Can specify the color of text, buttons, and overlay.</li>
<li>Can specify the upper limit of the display width.</li>
<li>Can specify the stack order of css elemental.</li>
<li>The above options filters are provided.</li>
</ul>
<h4>Other filters</h4>
<ul>
<li>Provide a filter to erase the menu.</li>
</ul>
<h4>How it works</h4>
<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/gmTUhSOPw9c?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>
<h4>Live Demo</h4>
<ul>
<li><a href="https://fbm.riverforest-wp.info/" rel="nofollow ugc">Fixed Bottom Menu Live</a></li>
</ul>
<h4>Icons</h4>
<ul>
<li><a href="https://developer.wordpress.org/resource/dashicons/" rel="nofollow ugc">Dashicons</a> can be specified.</li>
</ul>
<h4>Customize</h4>
<ul>
<li>Template files allow for flexible <a href="https://github.com/katsushi-kawamori/Fixed-Bottom-Menu-Templates" rel="nofollow ugc">customization</a>.</li>
<li>The default template file is <code>template/fixedbottommenu-template-html.php</code> and <code>template/fixedbottommenu-template-css.php</code>. Using this as a reference, you can specify a separate template file using the filters below.</li>
</ul>
<pre><code>/** ==================================================
 * Filter for template file of html.
 *
 */
add_filter(
    'fixed_bottom_menu_generate_template_html_file',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
        $upload_dir = untrailingslashit( $upload_dir );
        return $upload_dir . '/tmp/fixedbottommenu-template-html.php';
    },
    10,
    1
);
</code></pre>
<pre><code>/** ==================================================
 * Filter for template file of css.
 *
 */
add_filter(
    'fixed_bottom_menu_generate_template_css_file',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_dir = wp_normalize_path( $wp_uploads['basedir'] );
        $upload_dir = untrailingslashit( $upload_dir );
        return $upload_dir . '/tmp/fixedbottommenu-template-css.php';
    },
    10,
    1
);
</code></pre>
<ul>
<li>CSS files can be set separately. Please see the filters below.</li>
</ul>
<pre><code>/** ==================================================
 * Filter for CSS file.
 *
 */
add_filter(
    'fixed_bottom_menu_css_url',
    function () {
        $wp_uploads = wp_upload_dir();
        $upload_url = $wp_uploads['baseurl'];
        if ( is_ssl() ) {
            $upload_url = str_replace( 'http:', 'https:', $upload_url );
        }
        $upload_url = untrailingslashit( $upload_url );
        return $upload_url . '/tmp/fixedbottommenu.css';
    },
    10,
    1
);
</code></pre>


Fixed Bottom Menu

Add a fixed menu. The basic menu is at the bottom, but it can also be displayed on the top, left, and right.

andreysv

<p>Small but functional plugin for transforming horizontal top menu to fixed on top when scrolling. Plugin supports dynamic responsive content, dynamicly stop and restore functionality. Can hide other objects when converting, i.e. the sticked menu can look different.</p>
<p>Identification of sticked object based on CSS selector.</p>
<h4>Features</h4>
<ul>
<li>The ability to exclude objects when the menu is sticked. This makes it possible to create a different display of menus in different states.</li>
<li>In the sticked menu, you can add a logo image with a link.</li>
<li>To transform from one state to another have been created a series of animations that you can select in the settings.</li>
<li>In the settings, you can change the background color for a sticked menu, which will further distinguish its two states. Also in the settings you can specify the presence and color of a shadow for a sticked menu. This will give the site a more three-dimensional look.</li>
</ul>
<h4>Settings list</h4>
<ul>
<li><strong>CSS Selector class or id</strong> – Main field for set the identifier of class name in CSS standard. By default in themes ‘Twenty Ten’ or ‘Twenty Fourteen’ used ‘.navbar’.</li>
<li><strong>CSS Selector for hiding objects</strong> – Field for set the identifier(s) of class(es) in CSS standard for objects that need hide while menu is sticky.</li>
<li><strong>Set background color</strong> – Checkbox for activating the background color.</li>
<li><strong>Background color of sticky object</strong> – The control for selecting the background color if it is activated. </li>
<li><strong>Opacity</strong> – Opacity of the sticked menu.</li>
<li><strong>Minimum media width</strong> – Field for set media width for deactivating sticking menu in responsive themes.</li>
<li><strong>Select transition</strong> – Field for selecting transition type from the list. Now plugin support five transition: Slide, Fade, Scale, Rotate, Skew and Custom. For Custom transition plugin includes file plugins/sv-sticky-menu/css/style.css. As examples this file has some preset transitions but you can include yours own.</li>
<li><strong>Start position</strong> – Field used for Slide transition and indicated start sliding position. By default starting position is -55 pixels.</li>
<li><strong>Transition time</strong> – Field to set the time of transition. By default 0.4 second.</li>
<li><strong>Z-index of object</strong> – In several cases menu can hide benease other objects. Thet’s mean that z-index menu is to low. By default this field has value 99.</li>
<li><strong>Show shadow</strong> – Checkbox for activating the menu shadow.</li>
<li><strong>Shadow color</strong> – The control for selecting the shadow color if it is activated. </li>
<li><strong>Shadow opacity</strong> – The control for input of the shadow opacity. </li>
<li><strong>Show logo</strong> – Checkbox for activating the logo in the sticked menu.</li>
<li><strong>Logo image</strong> – The control for selecting the logo image from media library.</li>
<li><strong>Logo height</strong> – The control for set the logo image height.</li>
<li><strong>Logo URL</strong> – The control for set the logo URL.</li>
</ul>
<h4>Themes where plugin was tested</h4>
<p>The plugin has been tested with several themes:<br />
* Twenty Ten         2.3<br />
* Twenty Fourteen    2.0<br />
* Storefront         2.2.3<br />
* Bluestreet         1.2.2<br />
* Rara Academic      1.0.8<br />
* Bakes And Cakes    1.1.1<br />
* Wallstreet         1.7.7.4</p>
<h4>Tested on</h4>
<ul>
<li>PC Chrome</li>
<li>PC Firefox</li>
<li>PC Opera</li>
<li>PC IE11</li>
</ul>


SV Sticky Menu

SV Sticky Menu is WordPress\'s plugin that create sticky menu on top of page. Plugin helps easy and quickly set menu as sticky with transition.

Fixed Bottom Menu vs SV Sticky Menu