Firefox Context Menu - Unwanted Navigation Images are Showing Again
Hi All,
I was using the following CSS to hide the navigation images and show only text labels on the context menu for the Back, Forward, Reload and Bookmark Page menu options...
/* Content Area Context Menu - Navigation Vertical Text */
#context-navigation,
#context-navigation > menuitem{
flex-direction: column !important;
}
/* hide images */
#context-back image, #context-forward image,
#context-reload image, #context-stop image,
#context-bookmarkpage image{
display: 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;
margin-inline-start: -19px !important; /* this pushes navigation text items to left, aligned with other menu items below */
}
It worked up until a couple of versions ago, but something has changed, and my CSS is now broken, and those navigation icons are back.
My context menu now looks like the attached image below.
Any help with showing only text labels on this menu is appreciated.
Thanks.
Modified by Slouch
All Replies (3)
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!
Modified by Slouch
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.
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.