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?