Mozilla will shut down Pocket’s services on July 8, 2025. At that time users will no longer be able to access the Pocket website, apps and API. You can export your saved items and API data until October 8, 2025 before they are permanently removed. For more information, see this article.

Avatar for Username

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

Tabs on bottom

  • 3 replies
  • 9 have this problem
  • 443 views
  • Last reply by booya

scottish2
scottish2

Well looks like they did it to us again. My tabs are back on top again and need to put them below where I am a lot of other users like our tabs!

Update: Codes working fine now for 133.0

Well looks like they did it to us again. My tabs are back on top again and need to put them below where I am a lot of other users like our tabs! Update: Codes working fine now for 133.0

Modified by scottish2

Chosen solution

/*Additions by Codehaven - Mike to change specific sizes*/

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

/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){ 

 #nav-bar > .titlebar-buttonbox-container{
   order: -1 !important;
   > .titlebar-buttonbox{
     flex-direction: row-reverse;
   }
 }

} @media not (-moz-bool-pref: "sidebar.verticalTabs"){ 

 .global-notificationbox,
 #tab-notification-deck,
 #TabsToolbar{
   order: 1;
 }
 #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
   display: none;
 }
 :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
   display: flex !important;
 }
 :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
   > .titlebar-buttonbox-container{
     display: flex !important;
   }
   :root[sizemode="normal"] & {
     > .titlebar-spacer{
       display: flex !important;
     }
   }
   :root[sizemode="maximized"] & {
     > .titlebar-spacer[type="post-tabs"]{
       display: flex !important;
     }
     @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
       > .titlebar-spacer[type="post-tabs"]{
         display: none !important;
       }
       > .titlebar-spacer[type="pre-tabs"]{
         display: flex !important;
       }
     }
   }
 }

}

/* Adjust the height of the Tabs Toolbar */

  1. TabsToolbar { 
   height: 32px !important; /* Neater toolbar height */
   min-height: 32px !important;
   max-height: 32px !important;
   margin: 10px 0 -5px 0 !important;
   padding: 0 !important;
   font-size: 14px !important;

}

/* Adjust tab height to match the toolbar */

  1. TabsToolbar .tabbrowser-tab { 
   height: 36px !important; /* Matches toolbar for a balanced look */
   padding: 0 4px !important; /* Adds slight spacing between tabs */

}

/* Center align tab content */

  1. TabsToolbar .tab-label { 
   line-height: 34px !important; /* Align text with tab height */
   margin: 0 !important;

}

/* Smaller close button for a cleaner appearance */

  1. TabsToolbar .tab-close-button { 
   height: 14px !important; /* Smaller close button */
   width: 14px !important; /* Proportional width */
   margin: 0 2px !important; /* Adjust spacing around the button */
   padding: 0 !important;

}

/* Prevent overflow and ensure neat alignment */ .tabbrowser-tab .tab-stack { 

   margin: 0 !important;
   padding: 0 !important;

}

/* Adjust tab icon size */

  1. TabsToolbar .tab-icon-image { 
   height: 18px !important; /* Matches the smaller close button */
   width: 18px !important;

}

Read this answer in context 👍 1

All Replies (3)

scottish2
scottish2 Question owner

/*Additions by Codehaven - Mike to change specific sizes*/

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

/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){ 

 #nav-bar > .titlebar-buttonbox-container{
   order: -1 !important;
   > .titlebar-buttonbox{
     flex-direction: row-reverse;
   }
 }

} @media not (-moz-bool-pref: "sidebar.verticalTabs"){ 

 .global-notificationbox,
 #tab-notification-deck,
 #TabsToolbar{
   order: 1;
 }
 #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
   display: none;
 }
 :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
   display: flex !important;
 }
 :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
   > .titlebar-buttonbox-container{
     display: flex !important;
   }
   :root[sizemode="normal"] & {
     > .titlebar-spacer{
       display: flex !important;
     }
   }
   :root[sizemode="maximized"] & {
     > .titlebar-spacer[type="post-tabs"]{
       display: flex !important;
     }
     @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
       > .titlebar-spacer[type="post-tabs"]{
         display: none !important;
       }
       > .titlebar-spacer[type="pre-tabs"]{
         display: flex !important;
       }
     }
   }
 }

}

/* Adjust the height of the Tabs Toolbar */

  1. TabsToolbar { 
   height: 32px !important; /* Neater toolbar height */
   min-height: 32px !important;
   max-height: 32px !important;
   margin: 10px 0 -5px 0 !important;
   padding: 0 !important;
   font-size: 14px !important;

}

/* Adjust tab height to match the toolbar */

  1. TabsToolbar .tabbrowser-tab { 
   height: 36px !important; /* Matches toolbar for a balanced look */
   padding: 0 4px !important; /* Adds slight spacing between tabs */

}

/* Center align tab content */

  1. TabsToolbar .tab-label { 
   line-height: 34px !important; /* Align text with tab height */
   margin: 0 !important;

}

/* Smaller close button for a cleaner appearance */

  1. TabsToolbar .tab-close-button { 
   height: 14px !important; /* Smaller close button */
   width: 14px !important; /* Proportional width */
   margin: 0 2px !important; /* Adjust spacing around the button */
   padding: 0 !important;

}

/* Prevent overflow and ensure neat alignment */ .tabbrowser-tab .tab-stack { 

   margin: 0 !important;
   padding: 0 !important;

}

/* Adjust tab icon size */

  1. TabsToolbar .tab-icon-image { 
   height: 18px !important; /* Matches the smaller close button */
   width: 18px !important;

}

Modified by scottish2

scottish2
scottish2 Question owner

Chosen Solution

/*Additions by Codehaven - Mike to change specific sizes*/

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

/* This reorders toolbar to place tabs below other toolbars. Requires Firefox 133+ */

@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){ 

 #nav-bar > .titlebar-buttonbox-container{
   order: -1 !important;
   > .titlebar-buttonbox{
     flex-direction: row-reverse;
   }
 }

} @media not (-moz-bool-pref: "sidebar.verticalTabs"){ 

 .global-notificationbox,
 #tab-notification-deck,
 #TabsToolbar{
   order: 1;
 }
 #TabsToolbar > :is(.titlebar-spacer,.titlebar-buttonbox-container){
   display: none;
 }
 :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
   display: flex !important;
 }
 :root[tabsintitlebar] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
   > .titlebar-buttonbox-container{
     display: flex !important;
   }
   :root[sizemode="normal"] & {
     > .titlebar-spacer{
       display: flex !important;
     }
   }
   :root[sizemode="maximized"] & {
     > .titlebar-spacer[type="post-tabs"]{
       display: flex !important;
     }
     @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
       > .titlebar-spacer[type="post-tabs"]{
         display: none !important;
       }
       > .titlebar-spacer[type="pre-tabs"]{
         display: flex !important;
       }
     }
   }
 }

}

/* Adjust the height of the Tabs Toolbar */

  1. TabsToolbar { 
   height: 32px !important; /* Neater toolbar height */
   min-height: 32px !important;
   max-height: 32px !important;
   margin: 10px 0 -5px 0 !important;
   padding: 0 !important;
   font-size: 14px !important;

}

/* Adjust tab height to match the toolbar */

  1. TabsToolbar .tabbrowser-tab { 
   height: 36px !important; /* Matches toolbar for a balanced look */
   padding: 0 4px !important; /* Adds slight spacing between tabs */

}

/* Center align tab content */

  1. TabsToolbar .tab-label { 
   line-height: 34px !important; /* Align text with tab height */
   margin: 0 !important;

}

/* Smaller close button for a cleaner appearance */

  1. TabsToolbar .tab-close-button { 
   height: 14px !important; /* Smaller close button */
   width: 14px !important; /* Proportional width */
   margin: 0 2px !important; /* Adjust spacing around the button */
   padding: 0 !important;

}

/* Prevent overflow and ensure neat alignment */ .tabbrowser-tab .tab-stack { 

   margin: 0 !important;
   padding: 0 !important;

}

/* Adjust tab icon size */

  1. TabsToolbar .tab-icon-image { 
   height: 18px !important; /* Matches the smaller close button */
   width: 18px !important;

}

booya
booya

Could you please indicate the part of the code that is responsible for the location of tabs pannel?