Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

FF 74 lost my bookmarks toolbar, they are vertical on the left, at the top if shiftkey and start FF

more options

The update today to 74 lost all my customized, userchrome.css stuff and the row of bookmarks that used to be at the top now go down the left size, or right side if I want, but I want it at the top. Userchrome does not seem to recognized either as I put what I had kept, back in the a chrome folder in the profile folder.

The update today to 74 lost all my customized, userchrome.css stuff and the row of bookmarks that used to be at the top now go down the left size, or right side if I want, but I want it at the top. Userchrome does not seem to recognized either as I put what I had kept, back in the a chrome folder in the profile folder.

Chosen solution

Hi AIVAS, is this a question or is it a suggested solution? You said:

I've included my FF screen image and current (works fine!) userChrome file.

If your question isn't answered by the multi-row bookmarks toolbar links earlier in this thread, could you start a new question? The links were all renamed recently, so you could start here:

https://support.mozilla.org/questions/new/desktop

Read this answer in context 👍 0

All Replies (20)

more options

Hi carversmith, Firefox's Safe Mode (shiftkey and start FF) ignores userchrome.css files.

You can remove the userchrome.css file and launch Firefox. Your bookmarks toolbar will return to the normal top position.

more options

But is this a permanent restriction? No userchrome.css anymore? Me personally, I like multiple icons only, no words saying CNN or such things, and grouped by function on my top tool bar. Thanks Carver

more options

What code are you using in userChrome.css and for what features ?

more options

This code was running before 74. Thanks

*********************
/* Multi-Row Bookmarks Toolbar Firefox 66+ */

#PersonalToolbar {
  min-height: unset !important;
  max-height: unset !important;
/* text-align: center !important; */
}

#PersonalToolbar #PlacesToolbarItems {
  overflow-x: visible !important;
  overflow-y: visible !important;
  display: inline-block !important;
}

#PlacesToolbarItems > .bookmark-item > .toolbarbutton-icon[label]:not([label=""]) {
  /* Reduce padding on individual bookmarks to fit rows closer together */
  margin-inline-end: 0px !important;
}
***********************************
For Firefox 66PLUS is ABOVE
For Firefox 57 to 65:
/* Multi-Row Bookmarks Toolbar */
#PersonalToolbar {
/* Provide room for up to 4 rows at 26px */
max-height: 104px !important;
}
#PlacesToolbarItems > box {
display: inline-block !important;
}
#PersonalToolbar #PlacesToolbarItems {
/* Override hiding */
overflow-x: visible !important;
overflow-y: visible !important;
/* Add a little cushion */
padding-bottom: 1px;
}
#PersonalToolbar #PlacesToolbarItems .bookmark-item {
/* Reduce padding on individual bookmarks to fit rows closer together */
padding-top: 1px !important;
padding-bottom: 1px !important;
}

Step 3 (optional): If you prefer to autohide the bookmarks toolbar, additionally add this code in the file userChrome.css and save the file:
/* Auto-hide bookmarks toolbar */
PersonalToolbar {

visibility: collapse !important;
position: fixed;
width: 100%;
border-bottom: 1px solid #A8A8A8 !important;

}
navigator-toolbox:hover > #PersonalToolbar {

visibility: visible !important;

}

Modified by cor-el

more options

I also had a chrome/userChrome.css file which when removed solved my issue.

Modified by BobDRAD

more options

If you want new rules for a multi-row bookmarks toolbar in Firefox 74, you could look at:

https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_bookmarks.css

more options

You need new code for the multi-row Bookmarks Toolbar.

See:

New CSS code here:

more options

Have now tried both codes recommended to recover multi-row bookmarks on the toolbar, with no change.

Steps: Type %appdata% to open Mozilla Profile folder. Double-click to open userChrome.CSS (which opens in Dreamweaver CS3). Delete existing code - then copy and paste one of the new recommended codes above into Dreamweaver. Save new code in Dreamweaver. Firefox Mulit-row Bookmarks Toolbar should be fixed.

To test the logic, I just took all code out of userChrome.CSS, saved it - and there's still no change to Firefox.

Do I understand the process correctly? If not, please show me the error of my ways...

Thank you.

Modified by Horse.Sense

more options

Hi Horse.Sense, was your existing code breaking the bar or being ignored?

Let's assume it was breaking the bar.

Did you try this code: https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_bookmarks.css

more options

Hello jscher2000.

If that's the code mentioned in other posts, I've already tried it. Have tried 3 so far, with no success. Also took all code out of the userChrome.CSS - and nothing changes.

Don't know the correct terminology, but what happens is all bookmarks that used to be horizontal in the toolbar, are now vertical along the left margin (all the way down to the bottom of the page and beyond) - and the rest of the screen is blank. Cannot click it, cannot see any open websites.

It seems the bookmarks menu somehow shifted from 'side to side', to 'up and down' - and are using the entire width of the screen as spacing for the bookmarks list.

At this point, unless it's an easy fix - I'm happy to go back to only one row of bookmarks in the toolbar, with the rest available via drop-down. I've wasted far too much time on this. Right now, I hate Mozilla!

Thanks for your help.

Modified by Horse.Sense

more options

Horse.Sense said

Also took all code out of the userChrome.CSS - and nothing changes.

I think you may be editing the wrong file. To find the file for your currently active Firefox profile, try using this method:

Open your current Firefox settings (AKA Firefox profile) folder from inside Firefox using either

  • "3-bar" menu button > "?" Help > Troubleshooting Information
  • (menu bar) Help > Troubleshooting Information
  • type or paste about:support in the address bar and press Enter

In the first table on the page, on the Profile Folder row, click the "Open Folder" button. This should launch a new window listing various files and folders in Windows/File Explorer.

Find and double-click into the chrome folder. What you find here would be the active userChrome.css file.

more options

Yup - Exact same place I was before, just a different way to get there. (Thanks for teaching me where to find the road less traveled...)

Opened it up anyway (hoping for a better result) and it's all the same story, different hour. Opened the chrome folder and it's empty - just as I left it earlier - but bookmarks problem still exists.

Any help to get the bookmarks back to the old way - one row with drop-down menu - would be fine. Not my favorite method, but I'm out of patience for this project and stupid freakin' Firefox. (Would rather not do any sort of full reset, as I've got a lot of other custom features and add-ons going.)

Thank you!

more options

Horse.Sense said

Opened the chrome folder and it's empty - just as I left it earlier - but bookmarks problem still exists.

Firefox only reads the userChrome.css file at startup. Have you been restarting Firefox between changes to test?

more options

No - I was opening a new Firefox, since there were so many tabs already opened while trying to research and solve the problem. Re-pasted the code, just totally closed FF and reopened - and voila - problem solved.

Thank you so much jscher2000 - You're a gentleman among e-contributors!

(But I'm still mad at Mozilla, for wasting our time...)

Have yourself a terrific rest of the week! :)

more options

I would try removing the file entirely, rather than just removing the content. That's what worked for me. Good luck!

more options

I've locked on to FF 73.0.1. Nothing I do to the "updates" (sic) brings back my setup. I'm too old to spend more time testing various possible fixes (I've already spent several days on this.) I haven't done any real coding for over 20 years.

I'm happy with FF 73.0.1 if I can stop the update nag.

Maybe someone can help.

I've included my FF screen image and current (works fine!) userChrome file.

/*AGENT_SHEET*/

/* Firefox 57+ userChrome.css tweaks ****************************************************/
/* code mostly taken from 'Classic Theme Restorer' & 'Classic Toolbar Buttons' add-ons **/
/* by Aris (aris-addons@gmx.net)*********************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/


#personal-bookmarks {
  display: block;
}

#personal-bookmarks #PlacesToolbar {
  display: block;
  min-height: 0px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 999px;
}

#personal-bookmarks #PlacesToolbar > hbox {
  display: -moz-stack !important;
  left: 0px;
  right: 0px;
  width: 100%;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems {
  overflow-x: visible;
  overflow-y: visible;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarItems > box {
  display: block;
}

#personal-bookmarks #PlacesToolbar > .bookmark-item{
  visibility: visible !important;
}

#personal-bookmarks #PlacesToolbar .chevron{
  display: none;
}

#personal-bookmarks #PlacesToolbar > hbox > hbox{
  overflow-x: hidden;
  overflow-y: hidden;
}

#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator[collapsed="true"],
#personal-bookmarks #PlacesToolbar #PlacesToolbarDropIndicator{
  display: none;
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item{
  padding-top: 2px;
  padding-bottom: 2px;
  /*margin-left: -4px !important;
  padding-right: 9.5px !important;*/
}

#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item:hover:active:not([disabled="true"]),
#personal-bookmarks #PlacesToolbar toolbarbutton.bookmark-item[open="true"] {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  /*-moz-padding-start: 4px;
  -moz-padding-end: 2px;*/
}

#personal-bookmarks #PlacesToolbar toolbarseparator{
  -moz-appearance: none !important;
  visibility: visible !important;
  display: inline;
  text-shadow: none !important;
  border-left: 3px solid ThreeDShadow !important;
  border-right: 3px solid ThreeDHighlight !important;
  vertical-align: middle;
}

#personal-bookmarks toolbarbutton.bookmark-item[dragover][open]{
  -moz-appearance: toolbarbutton;
}

#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar):not(#TabsToolbar) { 
  max-height: 999px !important;
}





/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
}
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
  padding-top: 0 !important;
}
/* Clean up spacing */
.titlebar-placeholder {
  display: none !important;
}
toolbarbutton.bookmark-item {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

/* If you display either:
   (1) The title bar, or
   (2) On Windows, the menu bar
   You might not want the following extra space above the main toolbar. 
   In that case, delete the following rule:
*/
#navigator-toolbox {
  padding-top: 20px !important;
}

/* Background for Light and Dark themes */
#main-window[lwthemetextcolor="bright"] #TabsToolbar, 
#main-window[lwthemetextcolor="dark"] #TabsToolbar {
  background-color: var(--chrome-secondary-background-color) !important;
  background-image: none !important;
}
#main-window[lwthemetextcolor="dark"] .scrollbutton-up,
#main-window[lwthemetextcolor="dark"] .scrollbutton-down,
#main-window[lwthemetextcolor="dark"] .tabs-newtab-button,
#main-window[lwthemetextcolor="dark"] #new-tab-button,
#main-window[lwthemetextcolor="dark"] #alltabs-button {
  fill: var(--lwt-text-color) !important;
}
/* Left and right borders on Win 7 & 8, but not on 10 and later: */
@media (-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
  /* Vertical toolbar border */
  #main-window[sizemode=normal] #navigator-toolbox > toolbar#TabsToolbar {
    border-left: 1px solid hsla(240,5%,5%,0.3) !important;;
    border-right: 1px solid hsla(240,5%,5%,0.3) !important;;
    background-clip: padding-box;
  }
}

/* Override vertical shifts when moving a tab (9 Jan 2018) */
#TabsToolbar[movingtab] {
  padding-bottom: 0 !important;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: 0 !important;
}

/* Move Find Bar above the page*/
.browserContainer > findbar {
  -moz-box-ordinal-group: 0;
}

:root {
  --tab-min-height_tnot: 32px;
}

#print-preview-toolbar,
#printedit-toolbar,
#titlebar {
  -moz-box-ordinal-group: 0 ;
}

#navigator-toolbox #toolbar-menubar {
  -moz-box-ordinal-group: 1 ;
}

#navigator-toolbox #nav-bar {
  -moz-box-ordinal-group: 2 ;
}

#navigator-toolbox #PersonalToolbar {
  -moz-box-ordinal-group: 3 ;
}

#navigator-toolbox toolbar {
  -moz-box-ordinal-group: 10 ;
}

#navigator-toolbox #TabsToolbar {
  -moz-box-ordinal-group: 100 ;
}

#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(1px + var(--tab-min-height_tnot)) ;
}

#TabsToolbar {
  position: absolute ;
  bottom: 0 ;
  width: 100vw ;
}

#tabbrowser-tabs {
  width: 100vw ;
}

Modified by cor-el

more options

Chosen Solution

Hi AIVAS, is this a question or is it a suggested solution? You said:

I've included my FF screen image and current (works fine!) userChrome file.

If your question isn't answered by the multi-row bookmarks toolbar links earlier in this thread, could you start a new question? The links were all renamed recently, so you could start here:

https://support.mozilla.org/questions/new/desktop

more options

Actually it is a call for help. I am very reluctant to update (sic) and spend hours or days fixing something that was fine before the update.

I did spend days with the FF 74 update, along with several postings of codes.

Will my current userChrome file work now? If so, I am willing to give it a try over the next 2 or 3 days. (I do have some time in lockdown.)

Will I spend hours/days "fixing" FF after every future update?

If you think I should start a new question, I will give it a try.

Thank you.

more options

Hi AIVAS, if your userChrome.css rules date back to Firefox 71 and haven't been updated since then, they probably won't be fully effective in Firefox 75.

  • There were changes in Firefox 72 affecting the code to move the tab bar below the other bars
  • There were changes in Firefox 74 affecting the code to create a multi-row bookmarks toolbar
more options

Lets first confirm that userChrome.css is still processed.

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:


For the tabs on bottom you can use this code that should work in most cases (with and without XUL @namespace) (some CSS variables (--xxx) may need adjustment).

For a multi-row Bookmarks Toolbar in Firefox 74+ you need this new code like posted above.

  1. 1
  2. 2