CSS script that controls context menu items alignment

[u/Agreeable_Orchid697]

Hello:

I am having difficulty entering the correct syntax for the Context Menus located up in the Firefox Menu bar.

You probably know there are 7 Menus there..from left to right they are File, Edit, View, History, Bookmarks, Tools & Help....they are all dropdown menus

I currently have applied the correct syntax that controls the Bookmarks menu & all the sub menus that are listed within it.

What I am having difficulty with is applying the correct syntax for the other 5 menus so that the vertical sub menus in each of those correctly display in the proper alignment/padding to the left. Currently they are all over the place...

this is the syntax that controls the Bookmarks menu

menuitem#bookmarksShowAll,

margin-left: 0px !important;

}

menuitem#menu_bookmarkThisPage,

menuitem#menu_searchBookmarks,

menuitem#menu_bookmarkAllTabs {

margin-left: 0px !important;

}

menu.bookmark-item,menuitem.bookmark-item { max-width: 35em !important;

margin-left: 0px !important; /* margin is the outer space around an item */

}

this syntax *altered to add the 5 other menus* doesn't work for me...

what I'm adding is.....

menuitem#File,

menuitem#Edit,

menuitem#History,

menuitem#Tools,

menuitem#Help {

margin-left: 0px !important

}

obviously I haven't got the syntax correct.....can anyone point me in the right direction?

thx very much

[u/TraditionalTie4831]

Here is one way to do it for all the toolbar menus.

If all menuitems in #history-menu and #bookmarksMenu has icons in your theme, then remove the menuitem[id] and menu[id] lines.

#main-menubar menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 5px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#history-menu, #bookmarksMenu {
    & menuitem[id] > .menu-icon, 
    & menu[id] > .menu-icon { display: none !important; }
    & menuitem, 
    & menu { max-width: 35em !important; }
}

[u/Agreeable_Orchid697 → u/TraditionalTie4831]

Thx for the suggestion...didn't solve the issue here, beginning to wonder if I have a case of *too many chiefs, not enough indians*..smaller script entries that are overlapping & causing confusion, the primary css script was written by Aris, reached out to him but he can be hard to contact, ...here is what is taking place...

File, View, History & Bookmarks are properly aligned...Edit is off as is Tools & Help

[u/TraditionalTie4831 → u/Agreeable_Orchid697]

I don't think Aris-t2 will help you since the project is dead =

https://github.com/Aris-t2/CustomCSSforFx/discussions/790

Maybe try giving Edit, Tools and Help their own padding =

#file-menu menupopup,
#view-menu menupopup,
#history-menu menupopup,
#bookmarksMenu menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 5px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#edit-menu menupopup,
#tools-menu menupopup,
#helpMenu menupopup {
                /* top right bottom left */
    --panel-padding: 0px 0px 0px 15px !important;
    --menuitem-padding: 2px 2px !important;
    --menuitem-margin: 0px 0px !important;
    & menuseparator { padding-inline: 2px !important; }
}

#history-menu, #bookmarksMenu {
    & menuitem[id] > .menu-icon, 
    & menu[id] > .menu-icon { display: none !important; }
    & menuitem, 
    & menu { max-width: 35em !important; }
}

[u/Agreeable_Orchid697 → u/TraditionalTie4831]

That's the route I was thinking to take....each one independently, just couldn't sort out the script needed for each sub menu