[Solved] Tabs overlap address bar

[SanderBouwhuis]

I have my address bar above the tab row. Now, when I add your CSS changes the tabs are intermingled with the address bar (see screenshot).

How can this be fixed?

Also, when I have many tabs, only the normal row and the row overlapping the address bar are shown. Are all the other bars higher up and therefore outside of the window?

[MrOtherGuy]

You are probably having trouble trying to make multi-row-tabs.css work with your other styles, is this correct?

There are multiple ways that you can use to achieve tabs below addressbar, so I suppose the one you have just is not compatible with my multi-row-tabs style. (this isn't all that surprising)

You can use my tabs_on_bottom.css style (window_control_placeholder_support.css is unnecessary if you have Windows titlebar enabled) instead to move tabs below addressbar.

[SanderBouwhuis]

Ok, I completely deleted the userchrome.css and will only use your css-hacks. Which scripts do I need to combine? I tried combining a couple, but every time something is wrong.

I would like (from top to bottom):

1. Window titlebar
2. Auto-hidden menu bar
3. Address bar
4. Multi-row tabs
5. Content / web page

Any help is greatly appreciated.

[MrOtherGuy]

Unfortunately that order is not possible with any combination of my styles. That auto hidden menubar (default Firefox behavior) is not going to be possible with both - multi-row tabs and tabs below address bar. With only multi-row tabs or only tabs below addressbar this could probably be hacked somehow, but it still wouldn't be doable without really extensive modifications to the styles in the repository.

If you really don't want the menubar to appear between addressbar and tabs toolbar then I think your best option is to show it as a overlay on top (not above) of addressbar. A simple version that you could try out is just this #toolbar-menubar{ position: fixed; top: 0; }

I made a more complex version here

So now you would use:

window_control__placeholder_support.css (optional)
+
overlay_menubar.css
+
Fx65_tabs_on_bottom.css
+
multi_row_tabs.css

[SanderBouwhuis]

I did exactly what you said, except that I used multi-row tabs Fx66+ (I'm running v68.0.1). Here it is : userChrome.txt It's close, but the menu bar is not auto-hidden. How do I auto hide the menu bar?

[MrOtherGuy]

You should use multi-row-tabs css. The fx66+ version is obsolete (and says so in the file). I don't remember exactly what but there are some problems with it.

All I can say that the setup I posted earlier is working fine on my end on Win10.

[SanderBouwhuis]

Ok, I made the change. Not only doesn't it work for me, it introduced a second problem. Here is the file: userChrome.txt

Two problems:

1. The menu still doesn't auto-hide (keeps overlapping the address bar).
2. Now I cannot select any tab on the first row of tabs (the second row does work).

[MrOtherGuy]

You userChrome file works just fine on my Nightly. However, I can reproduce the issues you describe with Firefox68. These is fixed now in the overlay_menubar.css, thanks for pointing them out.

[SanderBouwhuis]

Hooray!!! You fixed it all!

For everyone also wanting this configuration, here is the working version : userChrome.txt

Please note the file is userChrome.txt, because the comments system doesn't allow userChrome.css files to be uploaded.