see this article https://support.mozilla.org/en-US/kb/customize-firefox-controls-buttons-and-toolbars#w_customize-the-overflow-menu-or-the-toolbar

Hi NickLima, the normal order is:

• Title bar (optional)
• Menu bar (optional)
• Tabs bar
• Navigation toolbar
• Bookmarks toolbar (optional)

Firefox should never move the Bookmarks toolbar above the Navigation toolbar. Do you use a userChrome.css file to customize the toolbar area?

In case you meant the Tabs bar, that you want the tabs below the main toolbar, you can use custom style rules in a userChrome.css file. Here's an example: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

I probably do; as I prefer the order as follows:

Menu bar Navigation toolbar Bookmarks toolbar Tabs bar

How do I restore that order? I'm pretty sure I have been using a customization to retain it as it hasn't been the default since the Quantum release. The most recent update again moved my bookmarks toolbar above my navigation toolbar. So now it's menu-bookmarks-navigation-tabs. I'd prefer the order to be menu-navigation-bookmarks-tabs. Thanks.

NickLima said

How do I restore that order? I'm pretty sure I have been using a customization to retain it as it hasn't been the default since the Quantum release.

It hasn't been the default since Firefox 4, but there was a preference until Firefox 28, and with Firefox 29 there was Classic Theme Restorer until Firefox 56.

But enough history, let's do this thing:

My Tabs on Bottom Recipe

You can use custom style rules to move the tabs bar. Firefox looks for a file named userChrome.css at startup and applies those rules to the user interface. When you have 10 minutes, here's what you do:

(A) Create a new chrome folder in your profile folder. This article has the steps for that (#1, #2, and optionally #3)

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

(I have boring videos for Windows and Mac if you are having trouble sleeping.)

(B) Set Windows not to hide the .css file extension (step #4 in the above article)

(C) Download the following file and move it into that chrome folder:

Firefox 57-64 (Windows and Mac): https://www.userchrome.org/samples/userChrome-tabs_on_bottom.css

Firefox 65+ (Windows): https://www.userchrome.org/samples/userChrome-tabs_on_bottom_Fx65.css

Firefox 65+ (Mac): See: Custom CSS tweaks for Firefox Quantum.

(D) If you do not already have a userChrome.css file: Rename that file to just userChrome.css

If you already have a userChrome.css file: Copy the rules from the new file into your current one using your favorite text editor.

The next time you quit Firefox and start it up again, it should discover that file and apply the rules.

Success?

Source: https://www.userchrome.org/what-is-userchrome-css.html#movetabbar (I run this site)

Ok, I did that, and it made the order the following:

Menu Bar Tabs Bar Navigation Bar Bookmarks Toolbar

I want it to be:

Menu Bar Navigation Bar Bookmarks Toolbar Tabs Bar

How do I do that?

The code has the 1-2-3 order as you want it and it still works in Firefox 62 for me:

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}

Do you have any other custom style rules going?

FIREFOX 65+ -- NEW CODE IS NEEDED

See: https://support.mozilla.org/questions/1232940#answer-1151829

Not sure if I do or not.

This is what I have currently:

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Vertical space for min/max/close buttons above the main toolbar */
/* On Mac, if not showing title bar, allow 20 pixels */
#main-window[tabsintitlebar="true"]:not([inFullscreen="true"]) #toolbar-menubar:not([accesskey]) ~  #nav-bar {
  margin-top: 20px !important;
}
/* On Windows, if not showing title bar or menu bar, allow 20 pixels */
#main-window[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  margin-top: 20px !important; /* More px may be better on Win10 */
}
/* Sorry, Linux users, I don't know the best approach for you! */

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

NickLima said

This is what I have currently:

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* Vertical space for min/max/close buttons above the main toolbar */
/* On Mac, if not showing title bar, allow 20 pixels */
#main-window[tabsintitlebar="true"]:not([inFullscreen="true"]) #toolbar-menubar:not([accesskey]) ~  #nav-bar {
  margin-top: 20px !important;
}
/* On Windows, if not showing title bar or menu bar, allow 20 pixels */
#main-window[tabsintitlebar="true"] #toolbar-menubar[autohide="true"][inactive="true"] ~ #nav-bar {
  margin-top: 20px !important; /* More px may be better on Win10 */
}
/* Sorry, Linux users, I don't know the best approach for you! */

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

That does look like the entire recipe. I don't recall any complaints about it not working in Firefox 60 earlier this year, so it should work for you.

Well, thanks for all of your help... I will keep tinkering with it until I find a solution that works. Perhaps the most recent update did something that messed with something I had changed previously... months or years ago, who knows... which is why it's not working.

I really wish Firefox would just make it easy to drag the toolbars in the order I prefer, like it used to be, or with Classic Theme Restorer. That's the whole reason I switched from "mainstream" browsers to Firefox in the first place, was the ability to EASILY customize! They're totally not listening to the people who have supported them for years!! :( I just want my browser to look and work like it always has again... menu-navigation-bookmarks-tabs... not how some random Firefox designer decides is the only way "I" should have it!

I use this code in userChrome.css to have the tab at the lower position. I had regularly issues like you reported where the Bookmarks Toolbar went above the Navigation Toolbar with other code. Maybe this works for you as well.

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

/* tabs on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
#TabsToolbar {-moz-box-ordinal-group:1000!important}

Hi rtb61, you said you left for Waterfox back in January, so what triggered your return visit today?

In case you need the link, Waterfox support is on Reddit: https://www.reddit.com/r/waterfox/

If you want help with Firefox configuration, I suggest starting a new thread listing your specific issues because the above recipe might conflict with the way you are combining controls across bars.

I found my old userChrome.css file but it won't let me delete the current code and replace it with the new one. Help!

And why does Firefox ignore so many of its users who would simply like the option—an easy one—to put the tabs where they want them? Not all of us want to have to learn any coding to get the tool we've used for years back to the way that works best for us.