Search Support

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

Firefox 133 update moved tab location, again.

  • 15 cavab
  • 13 have this problem
  • 182 views
  • Last reply by david716

more options

I prefer the tabs be below the bookmark bar, and successfully modified the CSS file to do this some time back. Now update 133 has once again pushed them up below the menu bar. What do I have to do to get them back where I want them this time? And why can't you just leave the tab location preference alone when doing updates?

I prefer the tabs be below the bookmark bar, and successfully modified the CSS file to do this some time back. Now update 133 has once again pushed them up below the menu bar. What do I have to do to get them back where I want them this time? And why can't you just leave the tab location preference alone when doing updates?

Chosen solution

This code in userChrome.css should be sufficient in current (and some older) releases.

/* ADDED: compatibility with vertical tabs*/
@media not (-moz-bool-pref: "sidebar.verticalTabs"){

/* TABS: POSITION - below NavBar */
#TabsToolbar {
  /*display: block !important; */ /* not needed in 113+ */
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/*[65-107]*//* #tabbrowser-tabs {width: 100vw !important;} */

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

/* Window Controls */
#TabsToolbar #window-controls {display: none !important;}

/* INDICATORS - HIDE */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

} /* END : @media */
Read this answer in context 👍 5

All Replies (15)

more options

You can check if there is an update available from the creator of your CSS code, there might be a link in the code where you can get the latest version.

You can set this pref to false in about:config to disable userChrome.css and userContent.css.

Helpful?

more options

This worked for me:

/* TABS on bottom */

  1. navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
-moz-box-ordinal-group: 10;

}

  1. TabsToolbar {
-moz-box-ordinal-group: 1000 !important;

}

  1. TabsToolbar {
display: block !important;
position: absolute !important;
bottom: 0 !important;
width: 100vw !important;

}

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
padding-bottom: var(--tab-min-height) !important;

}

  1. tabbrowser-tabs {
width: 100vw !important;

}

  1. TabsToolbar #window-controls {
display: none !important;

}

Helpful?

more options

Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.

Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there? Tried pasting your recommendation into userChrome.css without them and the tabs still come out on top. Did you change anything else, besides adding the code you suggested?

Helpful?

more options

PIckAnotherID said

Cor-el - Last update regarding tabs on userChrome.org was the one I used for versions before 133, that's stopped working.

Sorry, I don't maintain code for moving tabs because it changes too often. You can try code you find here, or one of these two major repositories:

For personal assistance with userChrome.css questions, I suggest this subreddit: https://www.reddit.com/r/FirefoxCSS/

As for why there need to be changes at all, the Firefox interface was built using proprietary code rather than standard HTML and CSS, and over time, they are modernizing different parts of it. For custom CSS purposes, it certainly would have been convenient if that were done all at once, but too late now.

Helpful?

more options

Seçilmiş Həll

This code in userChrome.css should be sufficient in current (and some older) releases.

/* ADDED: compatibility with vertical tabs*/
@media not (-moz-bool-pref: "sidebar.verticalTabs"){

/* TABS: POSITION - below NavBar */
#TabsToolbar {
  /*display: block !important; */ /* not needed in 113+ */
  position: absolute !important;
  bottom: 0;
  width: 100vw !important;
}

/*[65-107]*//* #tabbrowser-tabs {width: 100vw !important;} */

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

/* Window Controls */
#TabsToolbar #window-controls {display: none !important;}

/* INDICATORS - HIDE */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

} /* END : @media */

Modified by cor-el

Helpful?

more options

Cor-el - That did the trick! Thank you very much.

Helpful?

more options

PIckAnotherID said

Minnie - When I copined your recommendation, the "1. " in front of some lines didn't copy. Do they need to be there?

That's a quirk of the markup this forum uses. If you type a line starting with a hash (#) it thinks you are starting a numbered list and changes it to "1." You need to change the "1."s to "#"s

To make a line like "#tabbrowser-tabs {" display correctly you actually need to type "#tabbrowser-tabs {"

Helpful?

more options

This text did move the tabs back to the bottom, but is there a way to add text to move the bookmarks toolbar back to under the menu bar ... THANKS!

Helpful?

more options

The Bookmarks Toolbar should by default be under Menu bar and the Navigation Toolbar, i.e. between the Navigation Toolbar and the Tab bar if you have moved the Tab bar to the lower position. Do you still have CSS code that affects the order of Bookmarks Toolbar?

#PersonalToolbar {order:xx}

Helpful?

more options

Um, I'm looking to have the bookmarks toolbar immediately under the menu bar ...and above what I called the Address Bar and what I think you refer to as the Navigation Bar. I don't know where to get code that affects the order of the Bookmarks Toolbar. The Bookmarks Toolbar is now immediately above the Tabs bar and under the Navigation Bar.and it's very tight. So, the order from top top bottom should be : Menu Bar -- Bookmark Toolbar -- Navigation Bar -- Tabs Bar. Any help would really be appreciated.

Helpful?

more options

You can try to add this rule:

#nav-bar {order:1}

Helpful?

more options

Yes, this worked! Thank you so much!

Helpful?

more options

Note that tabs below the Navigation Toolbar isn't compatible with vertical tabs, available via the revamp sidebar settings.

Helpful?

more options

Thanks for the heads up! Not an issue for me, I'm happy that my settings are now restored to where they were before the Firefox Update. Hoping they quit this soon, it's really painful! Thank you again for all the help!

Helpful?

more options

I've seen the update comments with added strings. Can someone post the complete code to cut/paste into the Chrome shortcut, please? Much obliged.

Helpful?

Sual ver

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.