Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

How do I alter the size of the web address bar?

  • 5 replies
  • 5 have this problem
  • 91 views
  • Last reply by FredMcD

more options

The space for the address bar is so large that the size of the 'Search' box (Google in my case) is tiny. How do I reduce the size of the web address box so that I can make the search address box bigger? Note: this is nothing to do with the toolbar or customising that - it is about customising the layout of the whole bar and changing the amount of space on the bar that each element takes.

The space for the address bar is so large that the size of the 'Search' box (Google in my case) is tiny. How do I reduce the size of the web address box so that I can make the search address box bigger? Note: this is nothing to do with the toolbar or customising that - it is about customising the layout of the whole bar and changing the amount of space on the bar that each element takes.

Chosen solution

The location bar and search bar are controlled by a flex property and take (combined) all available space on the Navigation toolbar.

You can set a maximum width for both/each of the bars with code in userChrome.css below the default @namespace line. With this method, the widths will remain fixed until you change them in the userChrome.css file.

Below this line in userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

add one or both of these lines, setting the pixels (i.e., 400px, 200px) to the width you want; include the # sign at the beginning of the line(s):

#urlbar-container { max-width: 400px !important; }
#search-container { max-width: 200px !important; }

Other - Update to Firefox 19.0.2, a security update released today

Read this answer in context 👍 3

All Replies (5)

more options

Chosen Solution

The location bar and search bar are controlled by a flex property and take (combined) all available space on the Navigation toolbar.

You can set a maximum width for both/each of the bars with code in userChrome.css below the default @namespace line. With this method, the widths will remain fixed until you change them in the userChrome.css file.

Below this line in userChrome.css:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

add one or both of these lines, setting the pixels (i.e., 400px, 200px) to the width you want; include the # sign at the beginning of the line(s):

#urlbar-container { max-width: 400px !important; }
#search-container { max-width: 200px !important; }

Other - Update to Firefox 19.0.2, a security update released today

Modified by TheOldFox

more options

Thanks, the code in userchrome sorted it. Could not get the double-headed arrow on the toolbar to re-size it that way. Was already updated to 19.0.2 earlier today.

more options

Note that the resizer appears in normal mode, so not in customize mode.
Also some customizations may prevent the resizer from appearing.

more options

I found all the answers above not very helpful, partly because they assume everyone knows all the terms that Firefox use for parts of their screen. I am sure all the answers above are technically better than the following, but have a disadvantage that they are unintelligible to non-techies. I suspect 99% of Google searches on this topic are looking for something as simple as the following. By trial and error, resizing for dummies:

1) Right click on one of the toolbars, or the blank area of the tab bar until you get a menu which says "customize", click on that.

2) Remove any elements or objects between the address/url bar and the search bar by select the elements or objects and dragging them to the left side of the address bar, or the right side of the search bar.

3) The two bars should now exist with a a very small space between them.

4) Exit the customize mode.

5) If you place the cursor between the 2 bars the double headed arrow appears. Slide as required.

6) If you want to replace the elements or objects back between the bars, enter customize mode again and drag them back. Exit customize mode when finished.

Modified by cwhit

more options

Here is an answer that may help you. Move the search window from the top to the add-on bar at the bottom of the page. Move your mouse to the area at the top where Firefox tabs are and left click. Set the add-on bar as on. Left click again and select customize. Take the mouse, now a hand, cover the search bar, right click and hold it down, drag the search bar to the add-on bar where you want it and let it go. I like this because now both the address and search bars have plenty of room. Customize allows you to put the icons where ever you want. There is also an add-on that gives you another add-on bar to place on the left or right side of the browser Now lots of room for icons. In fact, there is also an add-on bar at the top where the menu bar is located. Have a good day.