Most visitors to a criminal defense website arrive on a phone, and many of them want to call rather than read. A sticky call bar, a strip pinned to the bottom of the screen with a tap-to-call button, is one of the most common patterns on law firm sites for that reason. It is also one of the most commonly broken. Bars cover footer links, collide with chat widgets, sit under the iPhone home indicator or hide the last line of every page.
This post walks through building one that behaves well: correct on notched phones, accessible, easy to measure and out of the way of the content. The examples use plain HTML and CSS with a few lines of JavaScript, so they port to any CMS or framework.
Start with the markup
Keep the bar simple. One primary action, the phone call, and at most one secondary action, such as a link to the contact form. Two buttons fit comfortably on small screens. Three usually do not.
Use a real tel: link with the number in international format, and put the human-readable number in the visible text. Screen reader users and people who distrust buttons both benefit from seeing the actual number. Wrap the bar in a landmark element with a label so assistive technology can identify it.
Handle the safe area on notched phones
On phones with a home indicator, content at the very bottom of the viewport can sit underneath it. CSS environment variables solve this, but only if the viewport meta tag opts in with viewport-fit=cover. Without that, env(safe-area-inset-bottom) returns zero and the bar may be partly covered.
.call-bar { position: fixed; inset: auto 0 0 0; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #0c1a33; z-index: 50; } .call-bar a { flex: 1; min-height: 48px; display: grid; place-items: center; } body.has-call-bar { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } @media (min-width: 900px) { .call-bar { display: none; } body.has-call-bar { padding-bottom: 0; } } The body padding matters. Without it, the bar covers the last part of every page, which on a law firm site is often the footer with the disclaimer and office addresses. Match the padding to the bar's real height, and test with large text settings, since the bar grows when the user increases the font size.
Make the tap targets generous
WCAG 2.2 added a target size criterion at level AA that sets a minimum of 24 by 24 CSS pixels for most targets, with some exceptions. That is a floor. For the main call button on a defense site, aim much larger, around 44 to 48 pixels tall, since the person tapping it may be stressed, in a car or using one hand.
Check contrast too. A white phone number on a pale brand color may look fine in a design file and fail outdoors on a phone. Run the colors through a contrast checker and aim for at least the AA ratio for normal text.
Avoid collisions with other fixed elements
Law firm sites often load a chat widget, a cookie banner and sometimes an accessibility overlay, each of which wants the bottom corner of the screen. If your bar and a chat bubble overlap, users may tap the wrong one or neither.
Decide on a stacking order and stick to it. Common choices are to move the chat launcher above the bar with a bottom offset, or to fold chat into the bar as the secondary action. Hide the bar while the on-screen keyboard is open on form pages, since it can cover the field the user is typing in. Listening for focus on inputs and toggling a class works on most devices.
Show it only where it helps
A call bar on every page is the default, but it is worth reconsidering. On a long charge page, the bar keeps the number in reach. On the contact page, which already shows the number and a form, it adds clutter. On a printable page, such as courthouse directions, hide it in a print stylesheet.
Some sites reveal the bar only after the visitor scrolls past the first screen, so the hero section stays clean. That can work, but test it. A visitor who wants to call immediately should not have to scroll to find the number.
Content matters as much as code. The words on the button affect whether people tap it, and plain labels such as "Call now" next to the actual number tend to be clearer than vague promises. This article on writing the words around the call button on a defense site covers the copy side.
Measure taps without breaking calls
Track taps on the call link as an event in your analytics tool. Attach the listener to the link and do not prevent the default action, so the dialer still opens if the analytics script is slow or blocked. Record which page the tap came from, since that is the data the marketing side will ask for.
Remember that a tap is not a call. Some users tap and hang up before connecting. If the firm uses a call tracking service, compare tap events with connected calls by page every month to see how far the numbers drift apart.
Test on real devices
Emulators catch layout problems, but they miss the details that matter here: the home indicator, the dynamic toolbar in mobile browsers that changes the viewport height while scrolling, and how the bar behaves when the keyboard opens. Test on at least one recent iPhone and one Android phone, held upright and turned sideways, with the system font size turned up.
For more on design for defense firm websites, the law firm website design guides cover layout, typography and mobile patterns.
Questions about sticky call bars
Does a sticky call bar hurt SEO?
A small bar that does not cover the main content is generally fine. Avoid anything that hides most of the screen on page load, since intrusive overlays can create a poor experience on mobile.
Should the bar show on desktop?
Usually not. Desktop visitors rarely place calls from the browser, and a header with the phone number serves them better.
Can the bar include a text message option?
Yes, with an sms: link, if the firm actually monitors that number. Make sure someone replies quickly and that texting fits the firm's intake rules.
SBD Marketing works only with criminal defense firms, one per city. It designs and builds websites for defense practices, handles SEO for the charges they defend, runs SEO audits and works on visibility in AI search tools.
