Move Firefox Tabs Back Below the Address Bar

Firefox keeps tabs above the URL bar, and the old option that moved them below it is long gone. Vertical Tabs is the only built-in alternative Mozilla ships today.

You can still put the tab strip under the address bar with a short userChrome.css rule: flip one about:config preference, create the file in your profile folder, and restart Firefox.

In this guide, I have covered:

Why Firefox keeps tabs above the address bar

If you upgraded from an older Firefox, or you switched from a browser that still puts tabs at the bottom, the current layout looks wrong. You have not missed a checkbox.

Firefox draws the tab strip above the URL bar, and no setting in the preferences moves it back down. Mozilla retired the toggle that controlled it years ago. The old preference browser.tabs.onTop is still listed in about:config, but changing its value changes nothing on screen.

That leaves two options: Vertical Tabs, the sidebar layout Mozilla ships today, or the userChrome.css tweak that puts the tab strip under the address bar.

Try Vertical Tabs if you mainly want tabs out of the way

Maybe you do not care whether tabs sit above or below the address bar. You just want them off the top of the window. If that is the case, Vertical Tabs is the answer, and it is built in.

It moves the tab strip into a left sidebar, which frees up horizontal room for page content. The layout is not the same as tabs below the address bar, but it is the only option Mozilla ships.

1. Click the menu and choose Settings.
2. Select General in the left sidebar.
3. Scroll to Browser Layout and switch the tab position to Vertical.

Tabs now live in a sidebar you can collapse or expand with the sidebar toggle. If you specifically need tabs underneath the URL bar, keep reading. The next sections cover the method that still works.

Enable userChrome.css support in about:config

Firefox will read custom CSS from your profile, but only if you flip one preference first. Out of the box, that loading is switched off, and nothing you put in the file will show up.

1. Open a new tab and go to about:config.
2. Click Accept the Risk and Continue on the warning page.
3. Type toolkit.legacyUserProfileCustomizations.stylesheets in the search box.
4. Click the toggle on the right so the value reads true.

The setting saves the moment you click the toggle. Leave that tab open or close it, whichever you prefer.

Open your Firefox profile folder

Your custom CSS lives in the profile folder, the same directory Firefox uses for bookmarks, history, saved logins, and cookies. The file has to go there exactly, so let the browser show you where that is.

1. Open a new tab and go to about:support.
2. Under Application Basics, find the Profile Folder row.
3. Click Open Folder next to it on Windows or Linux, or Show in Finder on macOS.

A file manager window opens directly inside your profile directory. Leave it open for the next step.

One caution while you are in there: deleting files by hand is a quick way to break a profile. If your goal is clearing what Firefox stores rather than customizing it, clearing cookies and cache in Firefox is the safer route.

Create the chrome folder and userChrome.css file

Firefox will not create either of these for you. The folder name has to be chrome, all lowercase, and it goes straight inside the profile folder.

1. In the profile folder, right-click an empty area and create a new folder named chrome.
2. Open the new chrome folder.
3. Inside it, create a new text file named userChrome.css. On Windows, set Save as type to All Files first, or the file saves as userChrome.css.txt.

Add the CSS rule to move tabs below the address bar

One rule does the actual move. Everything so far just tells Firefox to read it.

1. Open userChrome.css in a plain text editor: Notepad on Windows, TextEdit in plain text mode on macOS, or any code editor.
2. Add this line on its own: #TabsToolbar{ order: 1; }
3. Save the file and close the editor.

The order property tells Firefox’s layout engine to render the TabsToolbar after the navigation toolbar. In practice, the tab strip gets drawn under the address bar instead of above it.

Make sure the file is named exactly userChrome.css and not userChrome.css.txt. Windows hides known file extensions by default, so a file that looks correct in the folder can still be a plain text file.

Restart Firefox to apply the change

Nothing moves until you relaunch. Firefox reads userChrome.css only at startup, so the change waits for the next launch.

1. Save any work in your open tabs.
2. Click the menu and choose Exit on Windows or Linux, or Quit from the Firefox menu on macOS.
3. Reopen Firefox.

You’ll know it worked when the tab strip appears directly below the address bar. If it is still on top, the next section covers the usual causes.

What to do if the tabs do not move

Still looking at tabs on top after the restart? Run through these checks in order. Each one takes seconds.

1. Confirm the file is named userChrome.css, not userChrome.css.txt.
2. Confirm the folder is named chrome, all lowercase, and sits directly inside the profile folder you opened from about:support.
3. Confirm toolkit.legacyUserProfileCustomizations.stylesheets is set to true in about:config.
4. Confirm the rule reads exactly #TabsToolbar{ order: 1; }, with no missing characters.
5. Start Firefox in Troubleshoot Mode to rule out an extension or another stylesheet overriding the layout.
6. Quit Firefox fully and open it again, since the first launch after the change sometimes needs a second attempt.

Almost every failure traces back to a wrong filename, a hidden extension, or the file sitting in the wrong folder. Rule out those three before you assume the CSS is broken.

If it still refuses to cooperate and you want a clean slate, you can reset Firefox settings on the Computer without losing your bookmarks or saved logins.

How to undo the change if you change your mind

Changed your mind? Removing the rule is the same process in reverse, and it takes two minutes.

1. Close Firefox completely.
2. Open the profile folder again from about:support: Profile Folder row, then Open Folder.
3. Delete userChrome.css inside the chrome folder, or remove just the #TabsToolbar{ order: 1; } line.
4. Relaunch Firefox.

You can also flip toolkit.legacyUserProfileCustomizations.stylesheets back to false in about:config. That stops Firefox from loading any custom CSS, not just this rule.

RELATED: Open Private Window and New Tabs in Firefox on the Computer