Firefox's style or appearance can be modified by creating a custom style rule to override the default styles in Firefox.

{note}Custom style rules might not work every time because of other factors (e.g. compatibility with other custom style rules) beyond the Mozilla community's control. Your custom style rule might also stop working each time a new Firefox release comes out.{/note}

{warning}The following "moving tabs below the URL bar" procedure only works on Linux and Windows. It does not work on Mac OS X.{/warning} Here's how to do it:

1. Create a userChrome.css file following the steps below, or see our community member's video (starts at 8:45). The rules you put in this file will override the default styles in Firefox.
   • Open your currently active profile folder: Type in about:profiles in the address bar, then click Open Folder (Windows) or Show in Finder (Mac).
   • Create a new folder named chrome.
   • Create a desktop shortcut to the chrome folder for easier future access.
   • Make sure Windows is set to show you file extensions like .txt and .css.
   • Create a new text file inside the chrome folder named userChrome.css.
2. Paste the CSS rules found in the third example here into the userChrome.css file and save your changes.
3. Reopen Firefox.

(Tip: Turn on your title bar or menu bar after you've made these changes.)

I checked out the video. I have at least 4 profile directories. How am I supposed to know which is default? And HOW am I supposed to have any idea how to do this on my own? Study Chrome programming? Search for hours for a solution on the Internet? Repair the damage you cause with each upgrade? With every computer? You may as well be asking me to take a twisted road to hell! Well, I am going to experiment and hope I don't damage anything!

Does not work. I created a directory under profiles. Added this text file:

**********************************************

\AppData\Local\Mozilla\Firefox\Profiles\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;
}

*********************************************

It did not work, so I put copies under every sub profile directory. Still does not work. I now searched for "Chrome" in "\AppData\Roaming\Mozilla\Firefox\". There are 10 "chrome" folders. There are 2 "userChrome.example.css" files. There is 1 "userChrome.css" file, but not where the video shows it! There are 4 "chrome.manifest" files. Now replacing the old "userChrome.css" file with the new file. Doing reboot, bye!

I restarted Firefox. Still does not work.

I think the best solution for you for now is to download Firefox ESR (52) and turn off automatic updates: https://www.mozilla.org/en-US/firefox/organizations/all/

This is definitely the wrong location for userChrome.css :

• \AppData\Local\Mozilla\Firefox\Profiles\userChrome.css

Should be in AppData\Roaming

• \AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\chrome\userChrome.css

Firefox uses two locations for the Firefox profile folder, so make sure to look in the correct location. Location used for the main profile that keeps your personal data in "AppData\Roaming".

• C:\Users\<user>\AppData\Roaming\Mozilla\Firefox\Profiles\<profile>\
• ~/Library/Application Support/Firefox/Profiles/<profile>/

Location used for the disk cache and other temporary files in "AppData\Local".

• C:\Users\<user>\AppData\Local\Mozilla\Firefox\Profiles\<profile>\
• ~/Library/Caches/Firefox/Profiles/

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

• Help -> Troubleshooting Information -> Profile Directory:
  Windows: Show Folder; Linux: Open Directory; Mac: Show in Finder
• http://kb.mozillazine.org/Profile_folder_-_Firefox

• create the chrome folder (lowercase) in the <xxxxxxxx>.default profile folder if this folder doesn't exist
• use a plain text editor (Windows: Notepad; Mac: Textedit) to create a (new) userChrome.css file in the chrome folder (file name is case sensitive)
• paste the code in the userChrome.css file in the editor window
• make sure that the userChrome.css file starts with the default @namespace line
• make sure that you select "All files" and not "Text files" when you save the file via "Save file as" in the text editor as userChrome.css.
  otherwise Windows may add a hidden .txt file extension and you end up with a not working userChrome.css.txt file

You are the only one to give the necessary information to locate the correct folder for the userChrome.css file. It now works correctly. Thank you. It seems everyone assumes we common people know where things are supposed to go. Still there are other issues with the tabs, like not being able to see hidden tabs to delete them, or having another line of tabs. This upgrade has had no noticable improvements, but a lot of headaches. I will never install this version of Firefox again. I wish I had never allowed this upgrade!