On Aug 14th 11 PM ET/Aug 15th 03:00 UTC, due to scheduled Firefox Account server maintenance, users may not be able to sign in or create a new subscription. This is expected to last approximately 30 minutes. Status updates can be found at https://status.vpn.mozilla.org or https://status.relay.firefox.com.

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 reduce the tabbar and Urlbar / Toolbar height in Firefox 72.0.1

  • 1 reply
  • 1 has this problem
  • 41 views
  • Last reply by JimFlasch

more options

Up until now I had been able to reduce the height of FIrefox's tabbar Urlbar / icon bar with the followng CSS code:

/* TABS: height */

root {
--tab-toolbar-navbar-overlap: 0px !important; /*fix for fullscreen mode*/
--tab-min-height: 23px !important;

}

root #tabbrowser-tabs {
--tab-min-height: 23px !important;

}

  1. TabsToolbar {height: var(--tab-min-height) !important;}

/* URL bar: height */

root #urlbar, :root .searchbar-textbox {
   font-size: 9pt !important;
   max-height: 23px !important;
   padding: 0px !important;

}

root #identity-box {
  font-size: 9pt !important;
  max-height: 23px;
  padding: 0px !important;

}

root #nav-bar .toolbarbutton-1 {
  font-size: 9pt;
  max-height: 23px !important;
  padding: 0px !important;

}

root #navigator-toolbox {
  font-size: 9pt !important;
  max-height: 23px !important;
  padding: 0px !important;

}

It no longer works. Why not?

Up until now I had been able to reduce the height of FIrefox's tabbar Urlbar / icon bar with the followng CSS code: /* TABS: height */ :root { --tab-toolbar-navbar-overlap: 0px !important; /*fix for fullscreen mode*/ --tab-min-height: 23px !important; } :root #tabbrowser-tabs { --tab-min-height: 23px !important; } #TabsToolbar {height: var(--tab-min-height) !important;} /* URL bar: height */ :root #urlbar, :root .searchbar-textbox { font-size: 9pt !important; max-height: 23px !important; padding: 0px !important; } :root #identity-box { font-size: 9pt !important; max-height: 23px; padding: 0px !important; } :root #nav-bar .toolbarbutton-1 { font-size: 9pt; max-height: 23px !important; padding: 0px !important; } :root #navigator-toolbox { font-size: 9pt !important; max-height: 23px !important; padding: 0px !important; } It no longer works. Why not?

Modified by JimFlasch

All Replies (1)

more options

I have no idea where the "1." in this line is coming from:

"1. TabsToolbar {height: var(--tab-min-height) !important;}"

It should not have the "1." in it, and does not in the text I cut and pasted from the css file ( which is right where it should be, BTW). The browser added the "1." in there in place of a "#" in the css code and I have no idea why.

Modified by JimFlasch