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 can I make the url bar taller

  • 11 replies
  • 5 have this problem
  • 5 views
  • Last reply by cor-el

more options

Ever since updating to version 40, my url bar has bee reduced in height. In the image provided you can see that the height of the url bar window and the search window are not the same. About 1/4 of the bottom of the url bar has been chopped off. I do use a custom userchrome.css file to help with font sizes and have had no issues with it since the issue with Windows scaling. I could include that if requested, but this is something new and I do not believe that my customization is the issue. Thanks for any help.

Ever since updating to version 40, my url bar has bee reduced in height. In the image provided you can see that the height of the url bar window and the search window are not the same. About 1/4 of the bottom of the url bar has been chopped off. I do use a custom userchrome.css file to help with font sizes and have had no issues with it since the issue with Windows scaling. I could include that if requested, but this is something new and I do not believe that my customization is the issue. Thanks for any help.
Attached screenshots

Chosen solution

Try adding these rules to reposition the urlbar area and its contents:

#urlbar-wrapper {
  height: 36px !important; 
  margin-bottom: -12px !important;
}
#urlbar {
  margin-top: -12px !important;
}

Definitely not perfect but perhaps good enough for now?

Read this answer in context 👍 1

All Replies (11)

more options

Still same issue Firefox 41.0.

more options

Do you use any custom style rules or theme-modifying extensions that could explain the strange inconsistency between the very large text in the URL bar and the short height allotted to it? Also, are the download and home icons unusually narrow or is that just a glitch in the screen shot?

In your Question Details > More System Details, I noticed a reference to IE Tab 2. Several IE Tab extensions (possibly also the corresponding plugins?) have been identified as interfering with bookmarking in Firefox 40. You might try disabling all IE Tab add-ons to see whether that makes any difference.

more options

Upon re-reading, since you are modifying the URL bar area, what rules do you have for that? Since the wiki engine underlying this forum will number any lines with a # in the first position, please insert a space before any lines starting with that character. (Inserting a space before a line causes it to become part of a pre block.)

more options

Thanks for the reply. I am visually impaired and have used userchroe,css to make fonts and icons larger. Never was an issue until recent versions did not apply the setting to the url bar thus leaving it chopped off on the bottom. If I increase the font, the search box indreases to fit the font, but the url bar will not resize and more of the font is chipped off. Here is my userchroe,css: Sorry, I do not understand what you are saying, just looking for where I can control this height to match the height of the search box.

/* Set chrome fonts to 25px */
.menubar-text, .menu-text, .menu-iconic-left, 
 .menu-iconic-text, #main-window {font-size:25px !important;}

/* personal-navigation */ 
.toolbarbutton-icon {height: 34px !important; width: 34px !important}

/* Widen the dropmarker in the Address url toolbar */
.autocomplete-history-dropmarker {width: 30px !important}

#urlbar[level] .autocomplete-textbox-container
{ background-color: #90EE90 !important; }

Modified by cor-el

more options

You can look at this extension to adjust the font size in the user interface.

You can set a global Zoom that affects both the user interface and web pages (this modifies the layout.css.devPixelsPerPx pref). You can do this via the Options/Preferences of the extension (about:addons or the Tools menu).

more options

I already use No squint to zoom text and web pages globally and individually. This has no effect on the menu bars. If nothing else works, I may try it, but would rather have the individual site control over a global control and would prefer not to have to do this with another add on.

Thanks for the reply

Modified by ldb55066

more options

A line that starts with a '#' is treated as special markup code, see:

You can force a <pre> tag with a leading Space character.

more options

Look what happens when I change the font size here:

/* Set chrome fonts to 25px */ .menubar-text, .menu-text, .menu-iconic-left,

.menu-iconic-text, #main-window {font-size:25px !important

Changed to this:

/* Set chrome fonts to 25px */ .menubar-text, .menu-text, .menu-iconic-left,

.menu-iconic-text, #main-window {font-size:35px !important
more options

Chosen Solution

Try adding these rules to reposition the urlbar area and its contents:

#urlbar-wrapper {
  height: 36px !important; 
  margin-bottom: -12px !important;
}
#urlbar {
  margin-top: -12px !important;
}

Definitely not perfect but perhaps good enough for now?

more options

That is a definite improvement. I tried playing with some of the numbers and could not improve it. I realize that this is a cosmetic thing, but it was annoying that something had changed. Thanks for the css edit again.

more options

This works for me on Linux without making changes to the margins or height. I did use margins in the past, but found that it didn't work very well. Only specify the font-size and Firefox will adjust the height of the location/address bar automatically. That works best for me.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* font-size: urlbar find search */
#urlbar .textbox-input-box,
findbar .textbox-input-box,
#search-container .textbox-input-box {
 font-size:25px!important;
 font-family:monospace;
}

Modified by cor-el