You can use the Browser Toolbox to find these selectors.

• https://developer.mozilla.org/en-US/Tools/Browser_Toolbox

See also this Reddit forum.

• https://www.reddit.com/r/FirefoxCSS/

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!

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;
}

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.