---
title: "Docked vs floating website bars: choose by layout risk | Barrava"
description: A practical way to choose a docked or floating website bar. Compare what it covers, what it moves, and what happens on a real mobile page.
image: https://www.barrava.com/hubfs/barra-seo/docked-vs-floating-website-bars-layout-risk-featured.png
---

[Skip to content](https://www.barrava.com/blog/docked-vs-floating-website-bars-layout-risk#main-content)

 Close

- [Home](https://www.barrava.com/)
- [Blog](https://www.barrava.com/blog)
- [Pricing](https://www.barrava.com/pricing)
- [Interactive demo](https://www.barrava.com/interactive-demo)

[Get Started](https://app.barrava.com/signup)

[Login](https://app.barrava.com/login)

[![Barrava logo](https://www.barrava.com/hs-fs/hubfs/Barrava_logo_Green_no_BG-1.png?width=1462&height=324&name=Barrava_logo_Green_no_BG-1.png)](https://www.barrava.com)

- [Home](https://www.barrava.com/)
- [Blog](https://www.barrava.com/blog)
- [Pricing](https://www.barrava.com/pricing)
- [Interactive demo](https://www.barrava.com/interactive-demo)

[Get Started](https://app.barrava.com/signup)

[Login](https://app.barrava.com/login)

![Side-by-side docked and floating website bars showing reserved space and overlay risk](https://www.barrava.com/hs-fs/hubfs/barra-seo/docked-vs-floating-website-bars-layout-risk-featured.png?width=300&name=docked-vs-floating-website-bars-layout-risk-featured.png)

[Rich Tank](https://www.barrava.com/blog/author/rich-tank)2 Nov 268 min read

# Docked vs floating website bars: choose by layout risk

[Previous](https://www.barrava.com/blog/design-loaded-versus-suppressed-cta-test)

<https://www.barrava.com/blog>

The page looks finished. The offer is clear, the form is short, and someone has added a bar so visitors can find the next action wherever they scroll. Then you open the same page on a phone. The bar sits over the final form button. Moving it up clears the button but covers a validation message. Changing the corner radius does nothing useful.

This is the real docked-versus-floating decision. A **docked bar** attaches to the bottom edge and can make the page leave room for it. A **floating bar** sits above the page with space around its edges, but the content behind it still exists. In Barrava's current implementation, docked mode can reserve page-bottom space; floating mode intentionally overlays content and clears Barrava's spacing override. Those are behaviours to test, rather than a promise that one style always wins.

If the bar carries actions people need throughout the page, start with docked and make the final content scroll clear. If it highlights one time-sensitive action, a restrained floating treatment may be right. The floating option earns its place only if the page, other controls and visitor's task can tolerate the area it covers.

## Ask what the bar is for before choosing its shape

Consider two pages. On a long product guide, visitors may need search, contact and a way back to a relevant section. On a campaign landing page, the main job might be to compare an offer and submit a form. Both pages could show a bottom bar, but they have different reasons for keeping it there.

For the guide, the bar acts like part of the continuing navigation. It should stay predictable, and the article's last link and footer should remain available. Docked placement is a sensible starting point because the page can reserve room for it. For the campaign page, a large permanent bar could compete with the offer and form. A compact floating action may work if it adds a useful route, such as “Talk to us”, without hiding the form. It may also be better to have no persistent bar at all. That is a design decision, not a product failure.

The visual differences can mislead a review. A rounded floating bar often looks lighter in a mock-up. Yet a narrow overlay can cover a small, important target at exactly the wrong time. A full-width docked bar looks heavier but may be easier to account for because the page knows how much space it occupies. Judge the behaviour with real content, not the attractiveness of an empty frame.

## Make a simple layout contract

Before choosing a variant, write down four things in ordinary language:

1. **Job:** Which visitor action does this bar make easier on this page?
2. **Footprint:** How tall and wide is it when real labels, larger text and mobile screen edges are included?
3. **Ownership:** Does the page make room for it, or can it cover part of the page?
4. **Yield rule:** What happens when a higher-priority item such as a consent choice, open chat, form error or on-screen keyboard needs the same space?

This is a **layout contract**: a short agreement between the page and the persistent control. It prevents a designer from assuming the page will move while a developer assumes the bar will simply sit on top. The terms are less important than answering them together.

“Make room” needs a little care. The page does not know the bar's final height from the design file alone. A longer label may wrap. A device may need extra distance from the screen edge. In CSS, that distance can be exposed as a **safe-area inset**: space needed to keep controls clear of a device cut-out or edge. The [CSS environment variables specification](https://www.w3.org/TR/css-env-1/) defines those values. When a rendered bar height already includes the inset, adding it again to page spacing creates an odd blank strip. Barrava's docked auto-spacing code measures the rendered shell when available and avoids that double count. On a customer site, still check the page's existing bottom padding and other fixed controls.

“Can cover” also needs honesty. A floating bar does not become harmless because it has rounded corners. It needs a known footprint and an agreed response if content passes underneath. A **z-index** is the stacking order that decides which layer appears on top. Raising it may make the bar visible, but it does not make the form button underneath usable. [CSS positioned layout](https://www.w3.org/TR/css-position-3/) explains the positioning model; the visitor experiences the collision, whatever the CSS label says.

## A decision table for the page you have

| If you observe… | Start with… | Then check… |
| --- | --- | --- |
| Several actions stay useful across a long journey | Docked | Can the final link, form control and footer move clear of the bar? |
| One secondary action needs a modest, temporary cue | Small floating bar | Does it cover a primary action, content or another launcher as the page scrolls? |
| The page already has a bottom checkout or app control | Neither until ownership is resolved | Which component reserves space, moves or yields? |
| The page is short and the main CTA is already visible | No persistent bar may be best | Does adding one actually help a visitor complete a task? |
| Mobile labels wrap or text is enlarged | Reassess the action set | Can you shorten or remove secondary actions before shrinking controls? |

These are starting choices, not a rule that every docked bar passes and every floating bar fails. A badly configured docked bar can still hide focused content. A carefully placed floating bar can be useful. The key is a visible decision based on the page's task and its crowded states.

## Work through a real page shape before approving the design

Here is an **illustrative example**, not a Barrava customer result. A software company has a long comparison page. Its most important action is “Compare plans” near the end. Support wants persistent chat; marketing wants a “Book a demo” bar. On desktop, the floating bar looks tidy. On a narrow phone, it overlaps the bottom of the comparison table, then the form's submit button when the visitor reaches the end.

The team starts by naming the job. Visitors need to compare plans first; booking a demo is useful after they understand the choice. Chat is help, not the primary route. The team chooses a docked bar with one “Compare plans” action and a smaller contact route. The page reserves the bar's rendered height, then they scroll to the last control and check whether it can sit fully above the bar. They test the chat-open state separately and agree that the open chat window takes priority; the bottom bar may need to yield while it is open.

This choice changes if the page is a short campaign page with the form above the fold and no long comparison. A small floating contact action might be enough, provided it stays clear of the form and can be dismissed or moved when another control opens. If it adds no route the page lacks, remove the persistent element. That is often the cleanest answer.

The useful output of this exercise is a one-line decision: “On the comparison page, reserve space for two continuing actions; suppress the bar while the chat panel occupies the bottom edge.” It tells the implementation and review teams what to check. “Looks less busy” does not.

## Test the states a mock-up leaves out

Start at the first screen, then scroll through the middle and all the way to the final page action. Repeat with the form in error, chat open, consent choices showing and the phone keyboard visible. If the bar can change height or the page can switch orientation, check those states too. The existing [Barrava guide to persistent mobile actions](https://www.barrava.com/blog/persistent-mobile-actions-without-covering-content) goes deeper into safe areas, anchors and browser changes; use it as the implementation companion to this layout decision.

Then use the keyboard. Press Tab through the page and Shift+Tab back. Watch where the focus indicator goes. **Keyboard focus** is the visible sign of which link, field or button will respond when someone presses Enter or types. The [W3C's Focus Not Obscured guidance](https://www.w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum) says a focused control must not be completely hidden by author-created content; its [sticky-footer failure example](https://www.w3.org/WAI/WCAG22/Techniques/failures/F110.html) shows why a fixed bottom layer can fail this test. Even if a control is only partly hidden, treat that as a usability problem to fix.

Narrow the viewport and enlarge the text. **Reflow** means the page rearranges so people can read and use it without scrolling both sideways and down. [WCAG's reflow guidance](https://www.w3.org/WAI/WCAG21/Understanding/reflow) uses a 320 CSS pixel wide view for ordinary vertically scrolling content, subject to defined exceptions. A row of five actions may look fine at the default font size and become unreadable at that width. Reduce the actions before squeezing their labels and targets. The question is whether the visitor can still recognise and reach the important route.

Finally, try the actual device and browser. The mobile address bar changes the visible area. The on-screen keyboard can leave far less room than a responsive preview suggests. One successful screenshot is a weak release check; a short sequence of real tasks is much stronger.

## Where Barrava fits, and where your site still decides

Barrava offers a configurable bottom toolbar with docked and floating variants, ordered modules and up to two enabled call-to-action (CTA) buttons, depending on plan. A CTA is the prompt asking a visitor to take a next step, such as “Book a demo”. In docked mode, the current runtime offers automatic, manual or off page spacing. Automatic spacing can reserve the measured rendered bar height while keeping larger existing bottom padding. In floating mode, it removes its own page-spacing override, so overlay is an explicit choice.

That product behaviour makes the decision testable. It does not know every customer page, chat window or consent banner in advance. The site team still needs to decide which actions deserve persistence and to test the combined states. [Barrava's website toolbar](https://www.barrava.com/) is a place to see the product category; the [website clutter audit](https://www.barrava.com/blog/website-clutter-audit-checklist) helps inventory the other elements competing for screen space.

Choose the variant after you can finish this sentence: “When the visitor reaches the important part of this page, the bar will \_\_\_, and the page will \_\_\_.” If you cannot fill both blanks, the design is not ready to ship. Start with the real page and its final action, then let that evidence choose the shape.

![avatar](https://www.barrava.com/hs-fs/hubfs/2024%20profile%20pic%20sq.jpg?width=290&name=2024%20profile%20pic%20sq.jpg)

[Rich Tank](https://www.barrava.com/blog/author/rich-tank)Rich Tank is a founder, consultant and product-minded marketer with experience across growth, CRM, digital strategy and user experience. He has spent his career helping businesses improve how they attract, convert and support customers online. He writes about digital experience, website journeys, marketing technology and the broader challenge of creating websites that are both effective and easy to use. Based in London, Rich is particularly interested in the intersection of user behaviour, conversion and product thinking.

## RELATED ARTICLES

[![logo](https://www.barrava.com/hs-fs/hubfs/Barrava_logo_Green_no_BG-1.png?width=1462&height=324&name=Barrava_logo_Green_no_BG-1.png "logo")](https://www.barrava.com)

 Streamline your website with Barrava's unified bottom bar, enhancing user engagement, compliance, and conversions through customisable features like scroll to top and feedback.

© 2026. All rights reserved. Barrava Limited. Company Number: 17014429

- [Cookie Policy](https://www.barrava.com/legal/cookie-policy)
- [Privacy Policy](https://www.barrava.com/legal/privacy-policy)
- [Terms of Service](https://www.barrava.com/legal/terms-of-service)

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Rich Tank",
    "url" : "https://www.barrava.com/blog/author/rich-tank"
  },
  "dateModified" : "2026-11-02T09:00:04.284Z",
  "datePublished" : "2026-11-02T09:00:00.000Z",
  "headline" : "Docked vs floating website bars: choose by layout risk | Barrava",
  "image" : [ "https://www.barrava.com/hubfs/barra-seo/docked-vs-floating-website-bars-layout-risk-featured.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://www.barrava.com/blog/docked-vs-floating-website-bars-layout-risk",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://www.barrava.com/hubfs/Barrava_logo_Green_no_BG-1.png"
    },
    "name" : "Barrava Limited"
  }
}
```

```json
{
  "@context" : "https://schema.org",
  "@id" : "https://www.barrava.com/#organisation",
  "@type" : "Organization",
  "name" : "Barrava Limited",
  "url" : "https://www.barrava.com/"
}
```