Option of putting the tabs BELOW the address bar

[Roberto92252]

I have had problems with the latest version of Safari on my Mac and am looking for another browser. Firefox seems like the best choice so far but it has one feature I cannot get used to and may ultimately prevent me from using it. That feature is the position of the tabs at the top, above the website address. Please give us the option of putting the tabs where they belong, BELOW the URL address bar and directly above the webpages.

[lg58]

Move Tabs Below Location Bar

At least give me the option to put the tabs where I need them to be. Please.

[Jon]

(Note: similar ideas have been merged into this thread)

[benderino]

Unfortunately upgraded to latest version (118) and now my tabs are at the top and I can't figure out how to put them back below the address bar.

I will just copy all my pages to another browser and check with Firefox next year.

I cannot work with a browser with the tabs above the address bar. It's too inefficient, and the wrong order of things. You have to travel to your house before you can be in your house. It's similar to Apple putting the address bar at the bottom of the screen in iOS but at least they gave the option to put it back at top.

[kdato]

I feel ya, benderino. Same here. Found a css sheet that puts the tabs back below, but the tabs look ugly. When I have time, I try to merge the old css sheet that has nice looking tabs with the new sheet that puts the tabs below. If I manage I'll post the sheet here.

[drakejones]

Anyone remember back when Mozilla's design philosophy was "Your Browser Your Way"?  And, Firefox was or was close to the most popular browser out there?  The devs break our mods intentionally, claiming that are trying to "standardize" Firefox; i.e., the volunteer edgelords want Firefox to look and perform just like Chrome -so why bother with Firefox?  Chrome is already Chrome.  I blame upper management for destroying the brand and devs couldn't care less about the success of the browser or OUR opinions.  They have no skin in the game and it shows.  

From the web:

"There has been a lot of discussion lately about the decline of the Firefox browser and numerous articles about it losing 50 Million users in the last two years.

"But the real decline has been over 12 years with a total loss of half a Billion users and 75% of the market share it once held.

"It all started in 2009 Q3 with the fateful decision to force Tabs-On-Top.

As soon as this decision was made, Firefox starting losing market share. Every other program on a PC uses tabs against the active window. Proprietary software like MS Office and Adobe, FOSS software like Notepad++ and GIMP, 3D design, video editors, hex editors, you name it: It is the standard, logical design.

https://news.itsfoss.com/firefox-continuous-decline/ 

[BalloonPark]

Was forced to update to 118.0.2 by my bank, and WOW my tabs are messed up once again. Thank you so much for wasting more of my time to try and hunt down custom css!

[drakejones]

The devs don't care what we think or want.  Pure arrogance.

[GFVHUB]

I want to change the position of the tab bar

I don’t want to place the tab bar at the top. That would be really inconvenient, because this is a frequently used function, more commonly used than bookmarks, so it should be placed below the bookmark bar. Can you add an option to allow the tab bar to be placed Underneath the bookmarks bar?

[drakejones]

Does esr 115.4.0esr break tabs under? 

[seasamin]

I just find I can not work effectively with Tab Bar above the Search and Bookmarks bar. Not everyone is the same - this is fundamental in life and also for software usage. Firefox power above other Browsers remains the ability for users to reconfigure its default layout. Where is that reality recognized if a simple capacity to move the Tabs bar is not available or can not be found?

[kdato]

When a new CEO gets appointed we hear nice words like "stronger focus on the customer". Empty words when it comes to browser users.

[bmazak]

All of you are in the same shoes as I was as far as tabs. Here is the latest I'v found still works with the curent 11-21-23 version. Below will give you multiple lines for the Bookmarks and tabs above content.

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/*******************************For FF74*************************************************/

/* NOTE ****** Multi Line Bookmark start ***********************************************/
/* Variables are set inside '.\config\' folders CSS files, if complete package is used! */

/* import old button/bookmark size code *************************************************/
@import "./../buttons/buttons_on_bookmarks_toolbar_old_size_and_appearance.css";
/* Bookmark lines and height */
:root {
--bookmark_items_height: 15px; /* <- bookmark items - line height */
--bookmark_items_lines: 4; /* <- maximum amount of lines */
}

#PersonalToolbar {
min-height: var(--bookmark_items_height) !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important;
}

#personal-bookmarks,
#PlacesToolbar > hbox {
display: block;
}

#PlacesToolbarItems {
display: flex;
flex-wrap: wrap;
overflow-x: visible;
overflow-y: auto;
}

#PlacesToolbarItems > .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
overflow-x: hidden !important;
overflow-y: visible !important;
max-height: calc(var(--bookmark_items_height)*(var(--bookmark_items_lines))) !important
}

#personal-bookmarks #PlacesToolbar {
display: block;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) );
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
overflow-x: hidden;
overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="false"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 2px !important;
margin-bottom: 2px !important;
vertical-align: middle;
}
/*
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="false"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="false"] {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
*/
#personal-bookmarks #PlacesToolbar toolbarseparator{
-moz-appearance: none !important;
visibility: visible !important;
display: inline;
text-shadow: none !important;
border-left: 3px solid ThreeDShadow !important;
border-right: 3px solid ThreeDHighlight !important;
vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
-moz-appearance: toolbarbutton;
}

#navigator-toolbox #PersonalToolbar {
max-height: calc( var(--bookmark_items_lines) * var(--bookmark_items_height) ) !important;
}
/* Multi line Bookmark end */

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column; } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patc... made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* IMPORTANT
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css

Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: 0px;
right:0;
height: 40px;
}
@media (-moz-gtk-csd-reversed-placement),
(-moz-platform: macos){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}
@supports -moz-bool-pref("userchrome.force-window-controls-on-left.enabled"){
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
/* Fx <112 compatibility */
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
--uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}
/* Re-order window and tab notification boxes */
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#tab-notification-deck{
/* Fx <112 compatibility */
order: 2;
}

#TabsToolbar { -moz-box-ordinal-group: 4; /* added 5-18-23 tabs not on bottom fix not working /*
order: 4;}
#TabsToolbar .titlebar-spacer{ display: none; }

/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){
.titlebar-button{
/* Fx <112 compatibility */
flex-direction: column;
}
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
display: block !important;
}
#toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
visibility: hidden;
}

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
#TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
#navigator-toolbox:not(:-moz-lwtheme){ background-color: -moz-dialog }

/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
order: 2;
}
*/
/* Start Tab-on-bottom.css /*

/* Tabs on bottom menu on top 5-19-23 /*
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Modify to change window drag space width */
/*
Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top
*/
/* See https://www.codehaven.co.uk/firefox/firefox-113-2023-tabs-on-top-bottom-not-working-fixed-again/
for important fixed for ver 113
/* IMPORTANT */
/*
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css
*/

:root{ --uc-titlebar-padding: 0px; }
@media (-moz-os-version: windows-win10){
:root[sizemode="maximized"][tabsintitlebar]{ --uc-titlebar-padding: 8px }
}
#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
position: fixed;
display: block;
top: var(--uc-titlebar-padding,0px);
right:0;
height: 40px;
}
/* Mac specific. You should set that font-smoothing pref to true if you are on any platform where window controls are on left */
@supports -moz-bool-pref("layout.css.osx-font-smoothing.enabled"){
:root{ --uc-titlebar-padding: 0px !important }
.titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

#navigator-toolbox{ padding-top: var(--uc-titlebar-padding,0px) !important; }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
order: 2;
-moz-appearance: none !important;
--tabs-navbar-shadow-size: 0px;
}

.titlebar-placeholder,
#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){ .titlebar-button{ flex-direction: column; } }

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_
bottom_menubar_on_top_patch.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root{ --uc-window-control-width: 0px !important }

#navigator-toolbox{ padding-top: calc(29px + var(--uc-titlebar-padding,0px)) !important }

#toolbar-menubar{
position: fixed;
display: flex;
top: var(--uc-titlebar-padding,0px);
height: 29px;
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 29px; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-width,20px);
}

#toolbar-menubar .titlebar-button{ padding: 2px 17px !important; }

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

/* TABS: height */*|*:root { --tab-toolbar-navbar-overlap: 0px !important; --tab-min-height: 25px !important; /*adjust to set height or omit to use density*/
--tab-min-width: 80px !important; /*adjust to set width or omit to use default*/

#tabbrowser-tabs {
width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

.tab-background {
border-radius: 8px 8px 0px 0px !important; border-image: none !important;
}
.tab-line {
display: none;
}

.tab-close-button {
color: red!important;
}

/* ************* End Tabs-on-bottom ************************* /*

/* ****************************Start tabs on bottom patch *********** /*

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom_menubar_on_top_patc... made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Menubar on top patch - use with tabs_on_bottom.css */
/* Only really useful if menubar is ALWAYS visible */

:root:not([sizemode="fullscreen"]){ --uc-window-control-width: 0px !important }

:root{
/* height if native titlebar is enabled, assumes empty menubar */
--uc-menubar-height: 20px;
}
:root[tabsintitlebar]{
/* height when native titlebar is disabled, more roomy so can fit buttons etc. */
--uc-menubar-height: 29px;
}
/* IS was in the Root command root:IS was red and removed /*
:root:is([sizemode="fullscreen"],[chromehidden~="menubar"]){
--uc-menubar-height: 0px;
}
/* Since menubar is statically at top, remove fake drag-space that might be set by window_control_placeholder_support.css */
:root:not([sizemode="fullscreen"]) #nav-bar{ border-inline-width: 0 }

#navigator-toolbox{
-moz-window-dragging: drag;
padding-top: var(--uc-menubar-height) !important;
}

/* Remove window dragging from notification boxes */
#tab-notification-deck,
.global-notificationbox{
-moz-window-dragging: no-drag;
}

:root:not([chromehidden~="menubar"]) #toolbar-menubar{
position: fixed;
display: flex;
top: 0px;
height: var(--uc-menubar-height);
width: 100%;
overflow: hidden;
}

#toolbar-menubar > .titlebar-buttonbox-container{ height: 100%; order: 100; }

#toolbar-menubar > [flex]{ flex-grow: 100; }
#toolbar-menubar > spacer[flex]{
order: 99;
flex-grow: 1;
min-width: var(--uc-window-drag-space-post,20px);
}

#toolbar-menubar .toolbarbutton-1 { --toolbarbutton-inner-padding: 3px }

:root:not([sizemode="fullscreen"]) #toolbar-menubar.browser-toolbar > .titlebar-buttonbox-container{
visibility: visible;
}
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #TabsToolbar#TabsToolbar#TabsToolbar > .titlebar-buttonbox-container {
display: none !important;
}

end

commetns are marks if you don't want the multi line bookmarks so delete that part and Google the way to add this code.  Instructions are at the web site in the first comments.

[bmazak]

see cs code below on these post for BM

[troyce]

Please revise to include option to put TABS below the bookmark toolbar. 

[troyce]

For FF release 123.0.1 with Windows 11 this seems to work:

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom.css

combined with: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/tabs_on_bottom_menubar_on_top_patc...

. . into one 'userChrome.css' file. The second hacks the first to put menubar at top, while still putting tabs where they belong, below all the window top-located bars.