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 to adjust/reduce hight of menu-bar using userChrome.css in Firefox 65?

  • 4 replies
  • 2 have this problem
  • 4 views
  • Last reply by Vule

more options

I use Firefox 65 on Windows 10 computer. Since Feb 9 i used instructions found in Answers to the "How to use userChrome.css to move Tabs to the bottom" Question, to: - adjust height of Address, Bookmarks and Tabs lines - underline Bookmarks and Tabs lines - adjust width of Tabs,

but could not find way to adjust Menu-bar line height.

It would be nice to get instructions about rules and list of commands that can be used how to design userChrome.css file.

I use Firefox 65 on Windows 10 computer. Since Feb 9 i used instructions found in Answers to the "How to use userChrome.css to move Tabs to the bottom" Question, to: - adjust height of Address, Bookmarks and Tabs lines - underline Bookmarks and Tabs lines - adjust width of Tabs, but could not find way to adjust Menu-bar line height. It would be nice to get instructions about rules and list of commands that can be used how to design userChrome.css file.

All Replies (4)

more options

You can use the Browser Toolbox to find these selectors.

See also this Reddit forum.

Modified by cor-el

more options

I tried to find answer and nothing i did would do the trick. Whatever changes i tried had surprising results. I could not resolve a problem by changing parameters in "css" file (I could not figure out how "css" works.) Any change I did just messed up css that worked (at least partially).

But, on a bright side, I am not one who easily give up!

more options

The height of the menu bar would be this selector:

#toolbar-menubar { height: 17px !important; min-height: 20px !important; }

Make sure you use the !important flag. You may have to add a min-height settings.

See also:

  • chrome://global/skin/toolbar.css
  • chrome://browser/skin/browser.css
toolbar[type="menubar"] {
	-moz-appearance: menubar;
	color: -moz-menubartext;
	min-width: 1px;
	min-height: 20px;
	padding: 1px 0px;
}
more options

To: "'cor-el

I spent some time trying and have had some success in setting firefox to show ta page as i liked, but never managed to reduce height of the menu line below 20px. It seams to me that there are some parameters that are preset and not change-able. I couldn't find simple and straightforward instructions how that all works. My "CSS" file looks like this:


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

#TabsToolbar {

position: absolute  !important; bottom: 0 !important; width: 100vw !important; -moz-box-ordinal-group: 3 !important; border-bottom: 3px solid blue !important; background-color: #f6f6f6 !important; }

  1. main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {

padding-bottom: 35px !important; }

#TabsToolbar .private-browsing-indicator,
#TabsToolbar #window-controls,
#TabsToolbar *[type="caption-buttons"],
#TabsToolbar *[type="pre-tabs"],
#TabsToolbar *[type="post-tabs"] {
display: none !important;

}

.tabbrowser-tab:not([pinned]) { min-width: 80px !important; }

  1. navigator-toolbox {
 border-bottom: 0px solid #000 !important;
}

/** "Light" Theme (Dark Text) **/

/* Border the background tabs (10% gray) for greater visibility */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab:not([selected="true"]) {
 border: 1px solid green !important;
 border-bottom: 2px solid blue !important;
 margin-right: 0px !important;
 background-color: white !important;

}

toolbar[type="menubar"] {

                             /*	-moz-appearance: menubar;   */

/* color: -moz-menubartext; */ min-width: 10px !important; min-height: 10px !important; padding: 0px 0px !important; }


/* Remove short vertical lines between background tabs */

  1. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::before,
  2. main-window:not([lwthemetextcolor="bright"]) .tabbrowser-tab::after {
 border: none !important;

}

/* Curve the background tabs at the upper left and right corners

  May not work on add-on themes. */

.tabbrowser-tab {

 border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important;
 background-color: #FFFF00 !important;
 margin-bottom: 0px !important;
 tabbrowser-tab height: 10px !important;

} /* Curve active tab and slightly overlap neighboring tabs */ .tabbrowser-tab .tab-background[selected="true"] {

 margin-left: 3px solid blue !important;
 margin-right: 3px solid blue !important;
 margin-bottom: 0px !important;
 border-radius: 5px 5px 5px 5px / 5px 5px 5px 5px !important;
 border: 2px solid red !important;
 background-color: #FFFF00 !important;
 }

which is mix of couple of other files I found with some changes I did.

It needs some cleaning and some more work.....but to me is "good enough". I will spend now time on learning it all before i attempt to refine it further.

Thank you for your help !!! .

Your references to web sites with informations were specially worth. It was worth trying to learn it all. I will have to spend more time reading - there are no shortcuts.