Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11To keep a bar fixed at the bottom of the screen while visitors scroll, add a dedicated element to your site and style it with CSS position: fixed. WordPress’s built-in Sticky block setting is different: it uses CSS sticky positioning, which keeps a block within its scrolling context rather than pinning it to the bottom of the viewport.
Choose the behavior you want
| Method | Use it when | Limitation |
|---|---|---|
| WordPress block Sticky setting | You want a Group, Row, or Stack block to stick as visitors scroll through a content area, and the control is available in your editor. | It sticks relative to its immediate parent; it does not directly pin a bar to the viewport bottom. WordPress documents this parent-relative behavior. |
| Dedicated element and custom CSS | You want a bar to remain at the bottom of the screen while the page scrolls. | You must add the element in a location appropriate to your theme and check its appearance against the site layout. There is no universal selector or insertion point. |
| Banner plugin | You prefer a settings-based option and a plugin offers the placement and behavior you need. | Features and compatibility vary. The Sticky Banner listing describes top and bottom placement, but that does not establish compatibility with your particular site. |
Use WordPress’s Sticky setting for a block within content
Choose this option when the element should stay visible only as the visitor scrolls through its parent area. WordPress describes the behavior this way: “Setting a block to the sticky position will stick the block to its most immediate parent when the user scrolls the page.” See the WordPress Theme Handbook’s Position documentation.
- In the site or page editor, select a supported Group, Row, or Stack block that is placed at the root of the site content.
- Open the block’s settings and look for the Position control, then choose Sticky if it is available. The exact editor controls can vary with your WordPress and theme setup.
- Preview the page and scroll through the block’s parent area to confirm that it sticks for the intended portion of the page.
For block themes, sticky support can be enabled in theme.json with settings.position.sticky: true. The broader appearanceTools setting can also enable sticky support along with other design controls. See Make WordPress Core’s sticky position block support notes. Enabling support makes the control available for supported blocks; it does not turn sticky positioning into a fixed viewport-bottom bar.
Pin a dedicated bar to the bottom of the screen with CSS
For a true floating footer-style bar, use a dedicated Group block or custom element with a unique class. Avoid applying fixed positioning to a generic footer selector without checking the site’s markup: the structural footer may contain the entire page footer, not just the compact bar you intend to float.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →- Add the dedicated bar using the site editor, a theme-appropriate template or pattern, or another insertion method supported by your site. Include the call to action, announcement, or navigation you want visitors to see.
- Assign the element a unique CSS class, such as
example-floating-footer-bar. Use the class name you actually assign when writing the CSS. - Add CSS using an interface your WordPress installation provides. WordPress recommends
theme.jsonfor standard theme styles where possible. The available CSS editor depends on the theme and setup. - Preview the site at desktop and phone widths, while logged in and logged out, and adjust spacing and stacking order if the bar covers page controls or content.
This example illustrates the positioning; replace the class name with your own and adapt the padding and colors to your design:
As an Amazon Associate I earn from qualifying purchases.
.example-floating-footer-bar {
position: fixed;
inset-inline: 0;
bottom: 0;
z-index: 1000;
padding: 0.75rem 1rem;
}On phones with a bottom safe area, you can include that space in the padding:
.example-floating-footer-bar {
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}The exact CSS needed depends on your element and theme. Test for overlap with cookie controls, forms, chat buttons, and page content. Also check the front end both with and without the WordPress admin bar visible, since logged-in and logged-out layouts may differ.
#1 Best Overall
Choose a place to add the CSS
WordPress’s guidance favors theme.json for standard theme styles where possible; see the Theme Handbook’s Styles documentation and Block Stylesheets. If your setup provides Additional CSS, the Customizer is one documented route. WordPress says: “Starting with WordPress 4.7, you can now add custom CSS to your own theme from the Appearance Customize Screen, without the need for additional plugins or directly editing themes and child themes.” See the Advanced Administration Handbook’s CSS page.
Additional CSS saved through the Customizer is tied to the active theme, so account for that if you change themes. The interface differs across classic and block themes; use the CSS option your installation actually exposes rather than expecting one identical menu path everywhere.
Quick Recap
Best Value
Rank #4
Rank #3
Use a banner plugin if you prefer settings
A plugin can be a reasonable alternative if it supports the placement, content, and display rules your site needs. For example, the Sticky Banner plugin listing describes top and bottom banner placement. Check its current documentation, update history, and compatibility information before installing it; the listing alone cannot confirm how it will behave with your theme, plugins, or page builder.
Check the bar before publishing
- Confirm it stays at the viewport bottom during scrolling; a block that sticks only within a section is a different behavior.
- Check narrow screens and make sure the bar does not conceal page content or controls.
- Keep its height and stacking order restrained, and provide a clear close control when appropriate.
- Test logged-in and logged-out views, including the effect of the WordPress admin bar.
- Verify any plugin or theme-specific instructions against your actual installation; compatibility with a named theme or page builder is not established by the general WordPress guidance here.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
