Are you possibly using code in userChrome.css that could cause this?

• https://www.userchrome.org/what-is-userchrome-css.html

Looks like a problem with the lightweight theme that you use to style the navigator toolbox area with a background image. You can try a different theme to see if you can find one that works better.

Any special reason you use an outdated and no longer supported Firefox version ?

• https://support.mozilla.org/en-US/kb/update-firefox-latest-version

Thanks for the very helpful information, especially the link with all the code. However, I do not see any code to do with this issue at the site. Can you please give me the lines of code I need to add to the userchrome.css file?

The reason am using an older version is deliberate as the add-ons I want have stopped working with the new versions.

One more question. I would like the tab fonts to be bold and black. What line would I add to the userchrome.css file to accomplish this? I modified it around to match what I want but this one eludes me. This is the only one that even came close.

#PlacesToolbarItems { font-weight: bold !important; }

Pl. see screenshot. Thanks. Here is the entire code:

/* 4. TABS: on bottom [display: block !important;] is a fix for ff 71*/
/* Those 2 lines, maybe don't need. */
/* #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} */
/* #TabsToolbar {-moz-box-ordinal-group:1000!important} */

#TabsToolbar {
 display: block !important;
 position: absolute !important;
 bottom: 0 !important;
 width: 100vw !important;
}

.tab-background[selected="true"] {
    background-attachment: none!important;
    background-color: #d0850d!important;
    background-image: none!important;
    background-position: none!important;
    background-repeat: none!important;
    background-size: none!important;
}

/* ROUNDED INACTIVE TABS */
.tabbrowser-tab::after, .tabbrowser-tab::before {
border-left: none !important;
}
.tab-background {
border-radius: 12px 12px 0px 0px !important;
}
.tab-line {
display: none !important;
}

#tabbrowser-tabs {
  width: 100vw !important;
}
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}

:root #tabbrowser-tabs {
 --tab-min-height: 28px !important; /* needs to be the same as above under :root */
 --tab-min-width: 80px !important;
}

#TabsToolbar {
 height: var(--tab-min-height) !important;
 margin-bottom: 1px !important;
 box-shadow: ThreeDShadow 0 -0px inset, -moz-dialog 0 0px !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

/* 6. drag space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 40px;
}

/* 7. Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}
#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}
#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* Combine nav and menu bars */
#nav-bar {
	padding-left: 310px !important;
}

#toolbar-menubar {
	-moz-box-ordinal-group: 2 !important;
	min-height: .1px !important;
	max-height: 0px !important;
}

#main-menubar {
	z-index: 1;
	height: 32px !important;
	position: absolute !important;
}

#PersonalToolbar {
	-moz-box-ordinal-group: 4 !important;
}

/* Change the bookmarks folder color */

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

.bookmark-item[container] {
  fill: red  !important;
}

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

@-moz-document url(chrome://browser/content/browser.xul){

#PlacesToolbarItems { font-weight: bold !important; }

}

The code you posted is for the Bookmarks Toolbar.

#PlacesToolbarItems { font-weight: bold !important; }

Your first screenshot shows the menu bar. That would be this code.

#menubar-items { font-weight: bold !important; }

Thanks kindly.

So, I added the line: #menubar-items { font-weight: bold !important; } to the end of the css file inside the flower bracket and rebooted Firefox, but nothing has changed. The fonts on the tabs are still not bolded. Any suggestions?

TIA.

I notice this line at the bottom of your code that doesn't work for current releases because they changed browser.xul to browser.xhtml as the consequence of moving from XUL to HTML namespace. Best is to leave out and only leave the #PlacesToolbarItems line.

@-moz-document url(chrome://browser/content/browser.xul){
  #PlacesToolbarItems { font-weight: bold !important; }
}

Change to :

 #PlacesToolbarItems { font-weight: bold !important; }

For that tab bar you need the .tabbrowser-tab selector. You may have to adjust the text color as well.

.tabbrowser-tab { font-weight: bold !important; }

For all items in the navigator-toolbox you can use this code instead of the individual CSS selectors.

#navigator-toolbox { font-weight: bold !important; }

Thank you so much for all your valuable help.

I added the following two lines and got exactly what I wanted:

#PlacesToolbarItems { font-weight: bold !important; }
#tabbrowser-tabs { font-weight: bold !important; }

I also need to bold my menu bar!

Do I need to create a userchrome.css file, or is it already present somewhere? Do I create and/or edit it with a text editor (i.e. Notepad) or do I need to do it in some other way?

If I create the file, do I just need to put #PlacesToolbarItems { font-weight: bold !important; } in the file, or is there additional code that needs to go into it?

I'm surprised there isn't an add-on to do all this! Apparently Theme Font & Size Changer used to do it, but it no longer works.

Thanks so much.

The code for the menu bar is in the first reply:

#menubar-items { font-weight: bold !important; }

Thanks! Now, do I add it to userchrome.css, or do I have to create userchrome.css and put that in it? Is there meant to be anything else in userchrome.css besides that line? Do I create and/or edit userchrome.css with notepad?

Are there meant to be two spaces between the brackets and the text in the code?

userChrome.css doesn't exist by default, so if you haven't used it before in your current profile then you need to create a new userChrome.css.

Add code to the userChrome.css file below the default @namespace line.

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

#menubar-items { font-weight: bold !important; }

It is not that difficult to create if you have never used it.

The first step is to open the "Help -> Troubleshooting Information" page and find the button to access the profile folder.

• https://support.mozilla.org/en-US/kb/use-troubleshooting-information-page-fix-firefox

You can find this button under the "Application Basics" section as "Profile Folder -> Open Folder". If you click this button then you open the profile folder in the Windows File Explorer. You need to create a folder with the name chrome in this folder (name is all lowercase). In the chrome folder you need to create a plain text file with the name (name is case sensitive). In this text file you paste the text posted. On Mac you can use the TextEdit utility to create the file as a plain text file.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named .txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the file.

See also:

• https://www.userchrome.org/what-is-userchrome-css.html
• https://www.userchrome.org/how-create-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

• https://www.userchrome.org/firefox-changes-userchrome-css.html

OK, here's what I've got now. I created userchrome.css, and I copied the text from your answer into it. I saved it, opened Firefox back up, and... nothing changed.

I assume you have the menu bar visible (View -> Toolbars).

• you can tap the Alt key or press the F10 key to show the hidden Menu Bar temporarily

Did you also make sure you enabled userChrome.css and set toolkit.legacyUserProfileCustomizations.stylesheets = true on the about:config page like I wrote in my above post ?

I'm attaching a screen shot of the menu bar as it is now. I keep it up there whenever I use Firefox. I just can't get the menu bar text to be bold.

I also set toolkit.legacyUserProfileCustomizations.stylesheets as true on the about:config page.

Do other rules in userChrome.css work to test if Firefox reads and processes the file ?

/* FONT-SIZE: URLBAR FINDBAR */
:-moz-any(#urlbar-container, .findbar-container) { font-size:12pt !important; }

That one works! Is there a code to make the menu bar bigger like that? That would be almost as good as bold.

You can use the same selector, but use or add a font-size rule. This applies to all toolbars:

#navigator-toolbox { font-size:12pt !important; }

Selector for the menus on the menu bar:

#menubar-items { font-size:12pt !important; }

I prefer a monospace font to make it easier to read and edit text in the location bar and use this code:

.urlbar-input-box, .findbar-textbox {font-size:11pt!important; font-family:"DejaVu Sans Mono"}

Here's what my userchrome.css file looks like. Making the location bar larger and smaller works easily. Making the menu headings larger or bold doesn't work at all. :-(

I've got toolkit.legacyUserProfileCustomizations.stylesheets and userchrome.css both marked as true in about:config. I don't know what else to do!

Maybe try more specific code.

#menubar-items .menubar-text { font-size:12pt !important; }

You can try to omit the @namespace line.

You can use the Browser Toolbox to check out existing rules.

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

To enable the Browser Toolbox, see:

• https://developer.mozilla.org/en-US/docs/Tools/Settings
• select "Enable remote debugging" in the Web Developer Tools settings (F1)