cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Roberto92252
New member
Status: New idea

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.

58 Comments
BalloonPark
Making moves

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
New member

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

GFVHUB
New member

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
New member

Does esr 115.4.0esr break tabs under? 

seasamin
New member

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
New member

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
Making moves

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
Making moves

see cs code below on these post for BM