What if you try this:

/* Content Area Context Menu - Navigation Vertical Text */
#context-navigation,
#context-navigation > menuitem{
  flex-direction: column !important;
}
/* hide images */
#context-back, #context-forward, 
#context-reload, #context-stop, #context-bookmarkpage {
  --menuitem-icon: none !important;
}
/* show text labels */
#context-back:after, #context-forward:after,
#context-reload:after, #context-stop:after,
#context-bookmarkpage:after{
  content: attr(aria-label) !important;
  align-items: self-start !important;
  padding-left: 1em !important;
}

Hi jscher2000,

Thank you for replying.

That's definitely a step in the right direction.

I've attached a new image (#2) to show the results of your change.

The height of the menu options appears to be too large, and the left margin is shifted too far to the right. It seems like a blank placeholder is being displayed where the images would normally appear.

I was able to counteract the margin issue with this line:

margin-inline-start: -32px !important;

The result is shown in attached image #3.

Is there a way to shorten the height of the menu option, and center the text vertically?

Thanks!

I'm sure anything is possible, but I was testing in a clean profile so I don't know what is compatible with your existing CSS.

I'm sure anything is possible, but I was testing in a clean profile so I don't know what is compatible with your existing CSS.

Hi jscher2000,

What happened when you tested with your suggestion?

Did the context menu appear normally formatted without the images?

jscher2000 - Support Volunteer said

I'm sure anything is possible, but I was testing in a clean profile so I don't know what is compatible with your existing CSS.

Hi jscher2000,

What happened when you tested with your suggestion?

Did the context menu appear normally formatted without the images?

Yes, but I realize I forgot one of the rules that moves the labels to the left instead of being centered:

/* Fix Alignment */
#context-navigation > .menuitem-iconic {
  align-items: start !important; /* default is center */
}

Combined with the earlier rules:

Yes, but I realize I forgot one of the rules that moves the labels to the left instead of being centered:

/* Fix Alignment */
#context-navigation > .menuitem-iconic {
  align-items: start !important; /* default is center */
}

Hmm... mine still looks like my second image, even with the latest rule (too much vertical space between them) , and I still needed to push everything to the left with...

margin-inline-start: -32px !important;

If I don't include the the margin-inline-start, everything is tabbed to the right as in my first image.

Is there a way to vertically center the menu options and/or decrease the vertical space housing each one?

I suspect you have some conflicting rules which make it impossible for me to replicate your issue.

Are you familiar with the Browser Toolbox? This is an external window that makes a remote connection to your Firefox. https://firefox-source-docs.mozilla.org/devtools-user/browser_toolbox/index.html

Then you can do the following:

(1) Turn on the feature to disable popups from closing when you click away. This allows inspecting context menus and drop-down menus.

(2) Use the Inspector to view the rules for the problem parts of the menu. Each part of the rules pane refers to its source. Presumably you have a bunch from userChrome.css, perhaps from different sections of the file. There will be a link to the relevant section of the files from the rules. Example screenshot attached.

I suspect you have some conflicting rules which make it impossible for me to replicate your issue.

I found the conflicting code in my file, and removed it, as follows...

#context-navigation .menuitem-iconic {
   justify-content: start !important;
   align-items: start !important;
   margin-inline-start: 31px !important;  /* this was apparently the culprit */
}

Now my context menu looks exactly like yours from a clean profile (see attached image).

I suspect I need this same selector, though, to modify the maximum height and vertical centering?

#context-navigation .menuitem-iconic { }

If possible, I would like these iconic menuitems to have the same height and vertical centering as regular menuitems.

Would you happen to know how to do that?

Thanks.

I think whatever code you use to space the other menu items you need to apply to the icon label items as well.