I usually use the Browser Toolbox (link is in the CSS code) to check the height of each toolbar (Layout tab in right panel) and possibly double-click the property value of each CSS var (Rules tab) and use cursor Up/Down to set the correct value to shift the Tab bar in the correct position.

I just hope I don't have to go through all of this again, when Firefox make another update in the future. I still don't understand why the Firefox Developers don't create a simple ADD-ON for the many users who prefer TABS BELOW.

My savior, gods bless you! Can you give me a little advice how to stretch tabs area - after applying your code tabs are below adress bar, but only at half screen.

Can you give me a little advice how to stretch tabs area - after applying your code tabs are below address bar, but only at half screen.

Hi xxx.514 . . . It was shown above but here it is again

Ahhh I've missed that line, changed to 100 and its working - and was asking cuz im not very good in CSS and didn't want to destroy everything including FF, thanks a lot for your help!

Ahhh I've missed that line, changed to 100 and its working - and was asking cuz im not very good in CSS and didn't want to destroy everything including FF, thanks a lot for your help!

Hi xxx.514 . . . I can do simple HTML coding, but I've never tried changing - css - code until (like you) I couldn't get my TABS BELOW. So that I didn't mess things up, I saved several versions of a NOTEPAD file in a separate folder, so I could always reinstate the original if I did. We got there in the end !!

Doesn't work for me. Can't find userchrome.css folder or where the broken line is. It really annoys me that Firefox keeps doing this to me. I have win 10 and Firefox 89.0.1

Hi ab160

Were you previously using userChrome.css to get the tabs below the Navigation Toolbar ?

I've modified the code added in the question to make it easier to get the tabs in the lower position that doesn't require adjusting a top property, but works the old way via "bottom:0;", so you can give that a try.

It is not that difficult to create userChrome.css if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name userChrome.css (name is case sensitive). In this userChrome.css text file you paste the text posted. On Mac you can use the TextEdit utility to create the userChrome.css file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

See also:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

• https://www.userchrome.org/firefox-changes-userchrome-css.html

Thank you for all your time and help, but still the tab bar is on top not below the bookmark bar.

Doesn't work for me. Can't find userchrome.css folder or where the broken line is.I have win 10 and Firefox 89.0.1

Hi ab160 . . . there isn't a FOLDER called - userChrome.css - in Firefox. Do you have a Folder called - chrome - in Firefox? What you have to do is to copy all of that text above below the SOLID line as it's no longer b-r-o-k-e-n Open a blank "Notepad" . . copy all of that text into it, and save it as - userChrome.css - (with a CAPITAL "C") inside your Chrome Folder. You also need to make the change to the about:config as I've described above. Please let us know how you got on . . and we will help you

Thank you for all your time and help, but still the tab bar is on top not below the bookmark bar.

Thank you for the comeback. I have a chrome folder, and it ended up in “C:\ProgramData\Mozilla\updates\E7CF176E110C211B” not likely the right place. The folder has a file “userChrome.css”. The contents of that file are:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust CSS variables until it looks correct */
/* you can use the Browser Toolbox to get the toolbar heights */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 33px !important;
  --tab-min-width:  60px !important;

  --tab-caption: 5px; /* caption buttons on tab bar */
  --tab-adjust:  0px; /* adjust tab bar - titlebar,menubar hidden */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important;
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
 bottom: var(--tab-adjust) !important;
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

Where did I go wrong?

Hi ab160, your latest reply went to the moderation queue, but I got a peek at it.

Confusingly, there are multiple Open Folder buttons on the Troubleshooting Information page. You need to use the Open Folder button a bit further down, on the Profile Folder row.

Sorry Jscher you lost me on that one. This was my last post: Thank you for the comeback. I have a chrome folder, and it ended up in “C:\ProgramData\Mozilla\updates\E7CF176E110C211B” not likely the right place. The folder has a file “userChrome.css”. The contents of that file are:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later - updated for 89+ */
/* https://searchfox.org/mozilla-release/source/browser/themes/shared/tabs.inc.css */
/* https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox */

/* ROOT - VARS */
/* you can adjust the CSS variables until it looks correct */
/* you can use the Browser Toolbox to get the toolbar heights */

*|*:root {
  --tab-toolbar-navbar-overlap: 0px !important;

  --tab-min-height: 33px !important;
  --tab-min-width:  60px !important;

  --tab-caption: 5px; /* caption buttons on tab bar */
  --tab-adjust:  0px; /* adjust tab bar - titlebar,menubar hidden */
}

/* TAB BAR - below nav-bar */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10 !important;}
#TabsToolbar {-moz-box-ordinal-group:1000 !important;}

#TabsToolbar {
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  width: 100vw !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - PADDING */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  position: relative !important;
  padding-bottom: calc(var(--tab-min-height) + 1px) !important; /*ADJUST*/
  background-color: var(--toolbar-bgcolor) !important;
}

/* TabsToolbar with menubar and titlebar hidden - adjust bottom - Firefox 65-73 */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
 bottom: var(--tab-adjust) !important;
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /*OPTIONAL*/
  background-color: var(--toolbar-bgcolor) !important;
  color:            var(--toolbar-color) !important;
}

/* indicators *//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Indicators - HIDE *//*
*|*:root:not([accessibilitymode])             .accessibility-indicator    {display: none !important}
*|*:root:not([privatebrowsingmode=temporary]) .private-browsing-indicator {display: none !important}
*/

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Hide window-controls and caption buttons on Tab Bar */
#TabsToolbar #window-controls {display: none !important;}
#TabsToolbar .titlebar-buttonbox-container {display: none !important;}

Where did I go wrong?

Hi ab160, you said: "I have a chrome folder, and it ended up in “C:\ProgramData\Mozilla\updates\E7CF176E110C211B” not likely the right place."

With that in mind, please refer to my previous reply, or check my page here on the right place to put your chrome folder:

https://www.userchrome.org/how-create-userchrome-css.html

You need to create the chrome folder in the current profile folder and place userChrome.css in this chrome folder.

You can use the button on the "Help -> More Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

• Help -> More Troubleshooting Information -> Profile Folder/Directory:
  Windows: Open Folder; Linux: Open Directory; Mac: Show in Finder
• https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data

Also make sure you enable userChrome.css by setting toolkit.legacyUserProfileCustomizations.stylesheets = true on the about:config page.

I've edited the CSS code you posted in your above reply for easier positioning the tab bar below the Navigation Toolbar, so you can give that a try.

"WOW" ! At last I got it. How can I thank you. This is the way it should be and you did it.

What I'd like to know, is what possible reason would the coders have for going to such extreme lengths to screw up the browser. Surely they must know better. Why in Gawd's name would they screw things up so badly and make it so hard to fix. I get the impression that they actually hate the people who use this browser.

Come on guys, surely you can do better....

It's hard to know what they were thinking, it's frustrating to say the least.

What I'd like to know, is what possible reason would the coders have for going to such extreme lengths to screw up the browser. Surely they must know better. Why in Gawd's name would they screw things up so badly and make it so hard to fix. I get the impression that they actually hate the people who use this browser. Come on guys, surely you can do better....

Hi snikky, The ability to move tabs below the address bar was removed many years ago, and support for it was dropped many years ago. If someone found a way to move the tab bar using a CSS file, it's essentially a hack. What that means is that even though Mozilla is not continuously trying to maintain the feature and put it through quality assurance testing so that it continues to work, some third-party found a way to do it.

userChrome.css and other ways of customizing Firefox that are not exposed in the interface are there for developers, not end-users. If it were intended for end-users, you would see a menu option or checkbox to move the tab bar; you wouldn't have to hack a text file in some hidden location.

This thread has been marked as solved by the person who asked the original question. If you're unable to implement the script, it would be best to use https://support.mozilla.org/en-US/questions/new where volunteers can get more details about your setup.

Because this thread is solved and more people might start using it for their own questions, I'm going to lock it.