Upgraded to 68.2.0esr and now tab bar and bookmark bar overlap
My FF was recently updated to 68.2.0esr and now looks horrendous. I have always had and liked my address bar on top, then bookmarks, then tabs. New versions of FF have occasionally had me searching for workarounds as the default arrangement changed. However, I cannot figure out the latest issue which renders FF mostly unusable for me. The bookmark and tab bars now almost completely overlap. I have to create an entire row of blank tabs just click on actual tabs I want in the second row. Sure, I can ctrl+tab my way through, but I don't prefer that method. Also, the bookmark bar is completely useless as is. Plus, everything just looks bad. Any suggestions as to how I can fix this mess?
Chosen solution
See also this thread for updated userChrome.css code for Firefox 65+ to move the Tab bar to the bottom position.
Read this answer in context 👍 1All Replies (5)
Could be caused by broken code in userChrome.css in case you use this file.
Are you using userChrome.css to modify the position of the Tab bar?
- https://www.userchrome.org/what-is-userchrome-css.html
- https://www.userchrome.org/how-create-userchrome-css.html
You will have to look for updated code that works with Firefox 68.
Can you post your current code ?
Hello, thank you for the reply. Below is my current userChrome.css code. I created this some years ago when FF started moving the various bars around. I also used to use TabMixPlus, but that is no longer compatible with FF. Any suggestions to 1) make FF usable and 2) give me the ideal state of file/location bar at the top, then bookmark bar, then tabs (multirow, uniform size if possible) would be greatly appreciated.
/* tabs on bottom */ #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10} #TabsToolbar {-moz-box-ordinal-group:1000!important} .tabbrowser-tab:not([pinned]) {min-width:35px;max-width:35px;} .tabbrowser-tab,.tab-background {height:var(--tab-min-height);} .tab-stack {width: 100%;} #tabbrowser-tabs .scrollbox-innerbox {display: flex;flex-wrap: wrap;} #tabbrowser-tabs .arrowscrollbox-scrollbox {overflow: visible;display: block;} #titlebar,#titlebar-buttonbox{height:var(--tab-min-height) !important;} #titlebar{margin-bottom:calc(var(--tab-min-height)*-1) !important;} #main-window[sizemode="maximized"] #titlebar{margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;} #main-window[sizemode="maximized"] #TabsToolbar{margin-left:var(--tab-min-height);} #titlebar:active{margin-bottom:0 !important;} #titlebar:active #titlebar-content{margin-bottom:var(--tab-min-height) !important;} #tabbrowser-tabs .scrollbutton-up,.tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){display: none;}
Modified
Hi Not applicable, you could look at the rules from the author of Classic Theme Restorer. I made a couple extracts here for Windows:
Chosen Solution
See also this thread for updated userChrome.css code for Firefox 65+ to move the Tab bar to the bottom position.
Many thanks! Finally had a chance to implement the solution and it worked like a charm. Hooray!