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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

How do I move my bookmarks toolbar back below the address/navigation bar? I don't like it above it.

  • 13 antwoorde
  • 2 hierdie probleem
  • 1 view
  • Laaste antwoord deur jmazzeo

more options

Firefox just updated and it moved my bookmarks toolbar ABOVE my navigation bar. I would like it below the navigation bar, like I had it for the last 12 years+ on Firefox. HOW DO I FIX THIS?

Firefox just updated and it moved my bookmarks toolbar ABOVE my navigation bar. I would like it below the navigation bar, like I had it for the last 12 years+ on Firefox. HOW DO I FIX THIS?

Gekose oplossing

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

Lees dié antwoord in konteks 👍 0

All Replies (13)

more options
more options

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?

more options

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

more options

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.

more options

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)

Gewysig op deur jscher2000 - Support Volunteer

more options

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?

more options

Gekose oplossing

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

Gewysig op deur jscher2000 - Support Volunteer

more options

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;
}

Gewysig op deur cor-el

more options

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.

more options

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!

more options

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}
more options

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.

more options

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.