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.

DmtLo

Wow-Company

<p><a href="https://lite.wow-estore.com/bubble-menu/" rel="nofollow ugc">🌟 Try Free Demo</a> | <a href="https://demo.wow-estore.com/bubble-menu-pro/" rel="nofollow ugc">🚀 Try Pro Demo</a> | <a href="https://wow-estore.com/documentations/bubble-menu-lite/" rel="nofollow ugc">📖 Documentation</a></p>
<p><strong>Bubble Menu</strong> is a <strong>free WordPress plugin</strong> that lets you easily create stylish, interactive floating menus in a unique circular (bubble) style. These visually appealing menus provide quick access to important links and help visitors navigate your site effortlessly, increasing engagement and conversions.</p>
<h3>🌟 Key Benefits:</h3>
<ul>
<li>Quickly set up interactive floating bubble menus.</li>
<li>Boost user interaction and site navigation efficiency.</li>
<li>Fully customizable and visually engaging.</li>
<li>Lightweight & optimized for performance.</li>
</ul>
<p>✅ <strong>Give your website a fresh, modern feel with Bubble Menu!</strong></p>
<p>—</p>
<h4>Main Features</h4>
<p>Bubble Menu simplifies navigation, allowing visitors easy access to critical content and actions. Fully customize your bubble menus to align perfectly with your site’s design.</p>
<h3>🎨 <strong>Customization & Styling</strong></h3>
<ul>
<li>Create <strong>unlimited floating menus</strong>.</li>
<li>Choose from <strong>8 different menu positions</strong> on your screen.</li>
<li>Pick from <strong>4 distinct button shapes</strong>: Round, Square, Rounded, Rounded-out.</li>
<li>Customize individual button <strong>colors and backgrounds</strong>.</li>
<li>Choose button animation styles upon opening.</li>
<li>Set label positions (left, right, top, bottom) for buttons.</li>
<li>Add tooltips for better user guidance.</li>
</ul>
<h3>🔗 <strong>Links & Accessibility</strong></h3>
<ul>
<li>Insert <strong>any link type</strong> in your menu items.</li>
<li>Access <strong>2000+ Font Awesome 6 Icons</strong> for visual appeal.</li>
<li>Append custom attributes (<code>class</code>, <code>ID</code>, <code>rel</code>, <code>aria-label</code>) for advanced styling and SEO.</li>
<li>Control visibility specifically for desktop, mobile, or tablet devices.</li>
</ul>
<h3>⚡ <strong>Performance & Compatibility</strong></h3>
<ul>
<li>Lightweight – minimal impact on page load speed.</li>
<li>Fully responsive design, compatible with all WordPress themes.</li>
<li>SEO-friendly structure to boost indexing potential.</li>
</ul>
<p>—</p>
<h4>Ideal Uses for Bubble Menu</h4>
<ul>
<li>Simplified site navigation.</li>
<li>Social media quick-links.</li>
<li>Contact and feedback panels.</li>
<li>Quick access user menus.</li>
<li>Promotion of special offers or announcements.</li>
<li>Innovative multilingual navigation.</li>
<li>Mobile-friendly menu solutions.</li>
<li>And much more!</li>
</ul>
<p>—</p>
<h4>🚀 Bubble Menu PRO</h4>
<p>Unlock advanced customization and functionality:</p>
<h3>🎨 <strong>Advanced Customization</strong></h3>
<ul>
<li>Custom Icon Upload – use your own branded icons.</li>
<li>Additional unique animation effects for menu interactions.</li>
<li>Advanced styling options for menus and tooltips.</li>
</ul>
<h3>🔗 <strong>Extended Functionalities</strong></h3>
<ul>
<li>Easy social sharing integration.</li>
<li>One-click page translation.</li>
<li>Smooth scrolling to page sections.</li>
<li>Quick print and download buttons.</li>
<li>Scroll to top/bottom navigation.</li>
</ul>
<h3>🎯 <strong>Advanced Visibility Rules</strong></h3>
<ul>
<li>Conditional display based on scroll, timer, and user actions.</li>
<li>Multilingual menu support.</li>
<li>Scheduled menu visibility.</li>
<li>Visibility based on URL or referrer URL.</li>
<li>Browser-based menu display control.</li>
</ul>
<p>🚀 <a href="https://wow-estore.com/item/bubble-menu-pro/" rel="nofollow ugc">Upgrade to Bubble Menu Pro</a> and supercharge your menus!</p>
<p>—</p>
<h4>🚀 Combine Bubble Menu with Our Complementary Plugins</h4>
<ul>
<li><a href="https://wordpress.org/plugins/popup-box/" rel="ugc">Popup Box</a> – Powerful popups and lead capture forms.</li>
<li><a href="https://wordpress.org/plugins/counter-box/" rel="ugc">Counter Box</a> – Dynamic counters, timers, countdowns.</li>
<li><a href="https://wordpress.org/plugins/sticky-buttons/" rel="ugc">Sticky Buttons</a> – Fully customizable sticky buttons.</li>
<li><a href="https://wordpress.org/plugins/side-menu-lite/" rel="ugc">Side Menu Lite</a> – Professional side navigation menus.</li>
<li><a href="https://wordpress.org/plugins/floating-button/" rel="ugc">Floating Button</a> – Interactive floating action buttons.</li>
<li><a href="https://wordpress.org/plugins/modal-window/" rel="ugc">Modal Window</a> – Beautiful modal windows.</li>
<li><a href="https://wordpress.org/plugins/calculator-builder/" rel="ugc">Calculator Builder</a> – Custom interactive calculators.</li>
<li><a href="https://wordpress.org/plugins/mwp-herd-effect/" rel="ugc">Herd Effects</a> – Social proof notifications.</li>
<li><a href="https://wordpress.org/plugins/float-menu/" rel="ugc">Float Menu</a> – Flexible side navigation menus.</li>
</ul>
<p>✅ <strong>Combine plugins to build a highly interactive and user-friendly website!</strong></p>
<h4>Support</h4>
<p>Need help? Visit our <a href="https://wordpress.org/support/plugin/bubble-menu" rel="ugc">support center</a> for quick answers.</p>
<h3>Installation Instructions</h3>
<h3>📌 Option 1: Install via WordPress Dashboard</h3>
<ol>
<li>Go to your WordPress admin dashboard (<code>wp-admin</code>).</li>
<li>Navigate to <code>Plugins</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> <code>Add New</code>.</li>
<li>Search for <strong>“Bubble Menu”</strong> and click <strong>“Install Now”</strong>.</li>
<li>After installation, click <strong>“Activate”</strong>.</li>
</ol>
<h3>📌 Option 2: Manual Installation (Upload)</h3>
<ol>
<li>Download the plugin’s zip file.</li>
<li>In your WordPress dashboard, go to <code>Plugins</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> <code>Add New</code> <span aria-hidden="true" class="wp-exclude-emoji">→</span> <code>Upload Plugin</code>.</li>
<li>Select the downloaded zip file, then click <strong>“Install Now”</strong>.</li>
<li>After installation, click <strong>“Activate”</strong>.</li>
</ol>
<p><strong>Alternatively (FTP):</strong></p>
<ul>
<li>Unzip the downloaded plugin file.</li>
<li>Upload the extracted <code>bubble-menu</code> folder to your server’s <code>/wp-content/plugins/</code> directory via FTP.</li>
<li>Go to Plugins in your WordPress dashboard and click <strong>“Activate”</strong> next to Bubble Menu.</li>
</ul>
<h3>🚀 Getting Started</h3>
<ol>
<li>Once activated, a new <code>Bubble Menu</code> section will appear in your WordPress admin menu (on the left side).</li>
<li>Click <strong>“Add New”</strong> to create your first button set.</li>
<li>Configure your buttons as needed.</li>
<li>Click <strong>“Save”</strong> to finalize and display your bubble buttons on the website.</li>
</ol>


Bubble Menu – Floating Button Menu with Sticky Navigation

Create interactive floating bubble menus to enhance site navigation and boost user engagement effortlessly.

Fixed Bottom Menu vs Bubble Menu – Floating Button Menu with Sticky Navigation