I have located the ids I want removed and can temporarily remove them with the editor
id="menu_bookmarkAllTabs"
id="bookmarksToolbarSeparator"
id="bookmarksToolbarFolderMenu"
id="menu_unsortedBookmarks"
id="otherBookmarksFolderPopup"
How do you make that permanent?

Where (in what drop-down list) do you want to hide these items?
What code are you currently using in userChrome.css to hide these items?
----
You can find the IDs of some default items in the files posted further down.
An example for Other Bookmarks for userChrome.css:
<pre><nowiki>#menu_unsortedBookmarks, BMB_unsortedBookmarks { display:none!important; }
</nowiki></pre>
----
See menu_
*https://dxr.mozilla.org/mozilla-release/source/browser/base/content/browser-menubar.inc
See BMB_
*https://dxr.mozilla.org/mozilla-release/source/browser/base/content/browser.xul
-----
See also:
*https://www.userchrome.org/how-create-userchrome-css.html
*https://www.userchrome.org/what-is-userchrome-css.html

edit: For some reason this page's formatting is changing typed hashtags "#" into the numbers 1. and 2.
This could prove very frustrating for people trying to replicate this code

I wasn't using userChrome that was just highlighting and deleting via the developer console.
I have managed to remove most of them by adding this to the css e.g.
<pre><nowiki>#bookmarksToolbarSeparator,
#menu_bookmarkAllTabs { display: none !important; }</nowiki></pre>
Just have one pesky separator left at the top
edit: For some reason this page's formatting is changing typed hashtags "#" into the numbers 1. and 2.
This could prove very frustrating for people trying to replicate this code