[Tip] The Best Working Method to Get Classic Address bar in Mozilla Firefox

If you are using newer versions of Mozilla Firefox web browser, you might have noticed the new redesigned address bar which is called Megabar (previously known as Quantumbar). The new Megabar enlarges as soon as the user clicks inside it. It displays URL suggestions drop-down list in form of a pop-up.

Following screenshot shows new Megabar in Mozilla Firefox browser:

The new Megabar takes lots of space on screen. Many Firefox users don’t like the new address bar design. The enlargement feature and pop-up style display annoys them a lot.

Previous working method to disable Megabar and restore classic address bar stopped working in newer versions of Firefox. Mozilla removed the required preference/flag which was used in previous method.

Recently we shared a new working method to disable enlarging address bar in Firefox which can be found at following link:

[Tip] New Working Method to Disable Enlarging Address bar in Mozilla Firefox

The new method works perfectly and completely disables new Megabar but it also disables URL suggestions list which some users didn’t like.

Today in this article, we are going to share another working method to restore classic address bar in Mozilla Firefox web browser. We’ll take help of CSS style code to modify the new Megabar and convert it into classic address bar. Once you follow this tutorial and apply provided CSS code, you’ll get the old classic address bar back in Firefox as shown in following screenshot:

Previously shared methods utilized hidden preferences/flags which are automatically removed in future Firefox versions by Mozilla team. So those methods are temporary.

But the new method which we are going to share in this article will be permanent. But if you don’t like CSS styling and want to restore classic address bar in Firefox without using CSS code, then above mentioned link will help you.

There are many CSS style codes available and lots of codes were shared by our readers. I tried many of them. Some of them don’t work at all and only few of them work but I was not satisfied with the end result. The output was not perfect. I was not able to get perfect classic address bar by using any of those CSS codes. Many codes were not complete and contained unnecessary extra coding.

So I decided to create my own CSS code. I experimented with several codes, modified them to get the best experience and added some new code to disable animation and shadow effects.

Finally I was able to create an exclusive code for my readers which works perfectly. Once you apply this CSS code, you’ll get 100% working classic address bar in Mozilla Firefox.

This CSS code completely disables the enlargement or pop-up feature of the address bar. It also removes all extra padding, gaps and unnecessary blank spaces between URL suggestions so the address bar takes less space and shows more suggestions. It also disables all animation and shadow effects to improve address bar performance.

Also the code will restore the URL type icon such as favorites, etc to the left of the URL suggestions to completely mimic the classic address bar.

If you also want to get rid of the new Megabar and want to restore classic address bar in Mozilla Firefox, following steps will help you:

STEP 1: Enable CSS Stylesheet Code Support in Firefox

Since we are going to use CSS style code, we’ll need to first enable support for CSS code in Firefox by modifying a preference/flag using about:config page. Just set toolkit.legacyUserProfileCustomizations.stylesheets preference to true on about:config page to enable support for CSS code.

Following article contains step-by-step guide for it:

[Fix] userChrome.css and userContent.css Codes Stopped Working After Firefox Upgrade

STEP 2: Download Required userChrome.css File

Now we’ll apply the CSS code. We’ll take help of a built-in file userChrome.css to implement our custom-made CSS code. This file doesn’t exist by default and we’ll need to manually create the file.

For your convenience, we have created a ready-made userChrome.css file. Download following ZIP file, extract it using 7-Zip or other file archive software and you’ll get userChrome.css file:

STEP 3: Copy userChrome.css File to Firefox Profile Folder

Now we’ll put the downloaded userChrome.css file inside our Firefox profile folder. You can directly open your Firefox profile folder using following steps:

• Type about:support in address bar and press Enter. It’ll open Troubleshooting Information page.
• Now look for “Profile Folder” option. Click on “Open Folder” button.

It’ll open your current Firefox profile folder.

Now create a new folder with the name chrome inside the profile folder. Right-click on empty area and select New-> Folder option. Or you can press Ctrl+Shift+N keys together to directly create a new folder.

Set the new folder name as chrome and press Enter key.

PS: Some users may already have chrome folder in their profile folder.

Now copy the downloaded userChrome.css file and paste it inside the newly created chrome folder.

PS: If you already have userChrome.css file in chrome folder, you’ll need to copy the text given in downloaded userChrome.css file and paste it at the top of existing userChrome.css file and save the file.

NOTE: Ignore the other userContent.css file shown in above screenshot. It was created for other purpose mentioned in this tutorial.

STEP 4: Restart Firefox to Apply Changes

At last, you’ll need to restart Firefox to apply changes. If you have opened multiple tabs and you don’t want to lose them, you can restart Firefox without losing tabs using methods given in following tutorial:

[Tip] How to Restart Mozilla Firefox Without Losing Tabs

That’s it. Restart Firefox browser and now you’ll see the good old classic address bar back in Firefox browser.

Also Check:

Tip to Increase Text Size in New Address bar “Megabar” in Mozilla Firefox

[Firefox Tip] Disable or Remove Search Tips and Suggestions Buttons in New Address Bar