We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

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

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

Moving the tabs below the menu toolbar in Firefox 57

  • 10 replies
  • 60 have this problem
  • 1 view
  • Last reply by Moses

more options

I want to move the tabs below the menu toolbar in Firefox 57 like it was in v 56. That's the main reason I don't use Chrome.

I want to move the tabs below the menu toolbar in Firefox 57 like it was in v 56. That's the main reason I don't use Chrome.

Chosen solution

You need to create a userChrome.css file before you can move the tabs below the address bar, here's a site that shows you how.

After doing that, put this into userChrome.css

/* Tab bar below Navigation & Bookmarks Toolbars

  For best results, show Title Bar or Menu Bar */
  #nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
   }
    #PersonalToolbar { /* bookmarks toolbar */
   -moz-box-ordinal-group: 2 !important;
   }
   #TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }
Read this answer in context 👍 16

All Replies (10)

more options

Chosen Solution

You need to create a userChrome.css file before you can move the tabs below the address bar, here's a site that shows you how.

After doing that, put this into userChrome.css

/* Tab bar below Navigation & Bookmarks Toolbars

  For best results, show Title Bar or Menu Bar */
  #nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
   }
    #PersonalToolbar { /* bookmarks toolbar */
   -moz-box-ordinal-group: 2 !important;
   }
   #TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }
more options

Do I place all of the code?

/* Tab bar below Navigation & Bookmarks Toolbars

 For best results, show Title Bar or Menu Bar */
 #nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 border-top-width: 0 !important; 
  }
   #PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
  }
  #TabsToolbar { /* tab bar */
-moz-box-ordinal-group: 3 !important;
  }

Or just

For best results, show Title Bar or Menu Bar */
 #nav-bar { /* main toolbar */
 -moz-box-ordinal-group: 1 !important;
 border-top-width: 0 !important; 
  }
   #PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
  }
  #TabsToolbar { /* tab bar */
-moz-box-ordinal-group: 3 !important;
  }
more options

Both code snippets you posted are the same minus some formatting. Copy / paste all the code in my initial reply into userChrome.css then restart Firefox.

more options

When I use this code in userChrom.css, the address bar moves to the top of the window. With it moves the Back and Forward buttons. On a Mac these buttons are then UNDER the Red close window button, and Orange reduce button. Is it possible to move or loose these Back & Forward buttons?. I have tried Customising with a Flexible Space to move the m away from the corner, but it didn't work.

more options

Moses, Thanks for your help. I created a text file and named it with a .css extension. I created a new css file with that extension in the title and it worked.

57 is wicked fast.

more options

Hi, I downloaded a prepared .css file from a german page and later I deleted it and created a .css-file with your instructions from this thread.

But with both solutions I had the same problems:

with the .css-file I can not restore old sessions anymore, it's completly gone. Also when the browser opens, I see the starting page only a short time, then it changes to a white page :-(

Any idea how to solve this? I really, really would like to have my tabs down.. Thanks for your help!

Modified by ThinkforSky

more options

ThinkforSky:

Make sure the file extension is .css and not .css.txt.

more options

I have followed all the steps to the best of my abilities. I have created the "chrome" folder in the profile being used by Firefox. I have entered the code into the chrome folder. Nothing has changed. Any idea as to what I am doing wrong?

more options

Can you send through a screenshot of the contents of your chrome folder and what you entered into userChrome.css?

more options

Roostersec: Actually, please create a new thread with those screenshots and PM me the link. I'll be closing this thread since the OP has already marked this as solved. For future reference, hijacking threads even if on the same subject is not allowed per forum rules and guidelines.