Scheduled maintenance: Thursday, September 24, between 11:30am and 13:30pm UTC. This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn’t solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter

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

Cuireadh an snáithe seo sa chartlann. Cuir ceist nua má tá cabhair uait.

73.0.1 tabs are both behind and covering navigation toolbar

  • 9 bhfreagra
  • 2 leis an bhfadhb seo
  • 247 views
  • Freagra is déanaí ó cor-el

more options

M computer (still running W7) auto-updated FF to version 73.0.1 and two things happened. First, the tabs now cover the navigation bar, and second, the "plus" sign to the right of the tabs disappeared so I can't go to my pinned tabs or add a new tab.

Any help will be appreciated. I do have a userChrome file, but it was a copy and paste and I don't know how to adjust it to correct these things. Or if there's something in about:config? I just don't know what I would try to change.

I've been trying to take a screenshot, but can only grab the webpage and not the "frame" so I can't demonstrate what I'm talking about, but basically the tabs are sitting right on top of the navigation toolbar, obscuring it.

Thank you all for your help.

Réiteach roghnaithe

This is my current code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later */
/* /source/browser/themes/shared/tabs.inc.css */

/* ROOT - VARS */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;

 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */

 --tabstoolbar-adjust:     -22px; /* menubar titlebar hidden */
 --personal-toolbar-height: 20px; /* personal-toolbar 20px */
 --captionbox-adjust: calc(-15px + var(--personal-toolbar-height));
}

/* TAB BAR on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  position: absolute !important;
  display: block !important;
  bottom: 0 !important;
/* width: 100vw !important; */
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important;
}

/* TabsToolbar with menubar and titlebar hidden - leave out in case of issues and possibly in Nightly builds */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) + var(--tabstoolbar-adjust)) !important; /*adjust var*/
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* possibly show private-browsing-indicator*//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/

/* hide indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* window-controls - full screen */
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons - possibly show - needs adjustment for the personal toolbar */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--captionbox-adjust)) !important;
  height: var(--tab-min-height) !important;
  visibility: visible !important;
}

/* caption buttons - HEIGHT */
.titlebar-buttonbox-container .titlebar-button {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0px !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 90px !important; /*adjust*/
}

/* END - Tabs on bottom */
Read this answer in context 👍 1

All Replies (9)

more options

From what Firefox version did you update ?

It is likely that your userChrome.css file for getting the tab on bottom is broken for this release.

If you remember where you got the content for placing the tabs on lower position then you can look for an update. Otherwise you can attach your current userChrome.css to see whether we can give advice on how to fix this. I haven't noticed that changes were needed from Firefox 72 to Firefox 73.

You can try this code:

more options

Hi CatsinQ, you need to update your "tabs on bottom" rules to get rid of the overlap. The amount of updating varies depending on the last version your rules worked with. For example, recently several users needed to remove an @namespace line from above their tabs-on-bottom code.

I don't know whether the new tab button will turn out to be fixed by the same changes, but hopefully it will.


There are so many threads on this, and people are starting in so many different places, that it's frustrating to help. If you want to start your "tabs on bottom" rules from scratch, I have a rules file you could use over here:

https://www.userchrome.org/what-is-userchrome-css.html#movetabbar

more options

For me it is still possible to have the code work with @namespace for XUL. I only needed to use *|*:root to define variables and for some other selectors.

more options

Cor-el and jscher2000: Thanks to both of you.

I'm not sure what version I updated from. It did it automatically.

Cor-el, I tried to follow your instructions and it DID help, the tabs are no longer overlapping the nav bar, but now the tabs are inbetween the menu bar and the nav bar and I really want them to be on the bottom. (sigh) but at least I can see what I'm doing!

jscher2000: I also tried to follow your instructions - by just taking out the @namespace - but ended up with the same issue. Tabs are not on bottom.

Is there anywhere else I could pick up code from? I am not a programmer and am so confused by all this stuff. It's a miracle I can navigate to my css file!

The code I formerly had was the following. ''

   @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
   /* TABS: on bottom */
   #navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {-moz-box-ordinal-group:10}
   #TabsToolbar {-moz-box-ordinal-group:1000!important}
   #TabsToolbar {
    display: block !important;     
    position: absolute !important;
    bottom: 0 !important;
    width: 100vw !important;
   }
   #tabbrowser-tabs {
     width: 100vw !important;
   }
   #main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {padding-bottom: var(--tab-min-height) !important;}
   /* TABS: height */
   :root {
    --tab-toolbar-navbar-overlap: -27px !important;
    --tab-min-height: 27px !important; /* adjust to suit your needs */
   }
   :root #tabbrowser-tabs {
    --tab-min-height: 27px !important; /* needs to be the same as above under :root */
    --tab-min-width: 80px !important;
   }
   #TabsToolbar {
    height: var(--tab-min-height) !important;
    margin-bottom: 1px !important;
    box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important;
   }
   #tabbrowser-tabs,
   #tabbrowser-tabs > .tabbrowser-arrowscrollbox,
   .tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
     min-height: var(--tab-min-height) !important;
     max-height: var(--tab-min-height) !important;
   }
   /* drag space */
   .titlebar-spacer[type="pre-tabs"],
   .titlebar-spacer[type="post-tabs"] {
     width: 40px;
   }
   /* Override vertical shifts when moving a tab */
   #navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
     padding-bottom: unset !important;
   }
   #navigator-toolbox[movingtab] #tabbrowser-tabs {
     padding-bottom: unset !important;
     margin-bottom: unset !important;
   }
   #navigator-toolbox[movingtab] > #nav-bar {
     margin-top: unset !important;
   }
   #TabsToolbar .tabbrowser-tab .tab-content {
     font-weight: 800 !important;
   }

''

more options

Sorry - but I've GOT to go to bed. I know it's better if I stay up and keep working with you guys, but I have work very early in the am and haven't eaten dinner yet and it's already time to go to bed. I promise to try any new suggestions tomorrow as soon as I get home. Thank you both so much.

more options

Réiteach Roghnaithe

This is my current code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* TABS: bottom - Firefox 65 and later */
/* /source/browser/themes/shared/tabs.inc.css */

/* ROOT - VARS */
*|*:root {
 --tab-toolbar-navbar-overlap: 0px !important;

 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */

 --tabstoolbar-adjust:     -22px; /* menubar titlebar hidden */
 --personal-toolbar-height: 20px; /* personal-toolbar 20px */
 --captionbox-adjust: calc(-15px + var(--personal-toolbar-height));
}

/* TAB BAR on bottom */
#navigator-toolbox toolbar:not(#nav-bar):not(#toolbar-menubar) {
  -moz-box-ordinal-group: 10 !important;
}

#TabsToolbar {
  -moz-box-ordinal-group: 1000 !important;
  position: absolute !important;
  display: block !important;
  bottom: 0 !important;
/* width: 100vw !important; */
}

#tabbrowser-tabs {
  width: 100vw !important;
}

/* navigator-toolbox - padding */
*|*:root:not([chromehidden*="toolbar"]) #navigator-toolbox {
  padding-bottom: calc(var(--tab-min-height) + 1px) !important;
}

/* TabsToolbar with menubar and titlebar hidden - leave out in case of issues and possibly in Nightly builds */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]):not([sizemode="maximized"])
 #toolbar-menubar[autohide="true"] ~ #TabsToolbar{
  bottom: var(--tab-min-height) !important;
  padding-top: calc(var(--tab-min-height) + var(--tabstoolbar-adjust)) !important; /*adjust var*/
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

#TabsToolbar {
  height: var(--tab-min-height) !important;
  margin-bottom: 1px !important;
  box-shadow: ThreeDShadow 0 -1px inset, -moz-dialog 0 1px !important; /* omit */
  background-color: var(--toolbar-bgcolor) !important;
  color: var(--toolbar-color) !important;
}

/* possibly show private-browsing-indicator*//*
*|*:root[privatebrowsingmode=temporary] .private-browsing-indicator {
  position: absolute !important;
  display: block !important;
  right: 0px !important;
  bottom: 0px !important;
  width: 14px !important;
  pointer-events: none !important;
}
*/

/* hide indicators */
.private-browsing-indicator {display: none !important;}
.accessibility-indicator    {display: none !important;}

/* Drag Space */
.titlebar-spacer[type="pre-tabs"],
.titlebar-spacer[type="post-tabs"] {
  width: 20px !important;
}

/* Override vertical shifts when moving a tab */
#navigator-toolbox[movingtab] > #titlebar > #TabsToolbar {
  padding-bottom: unset !important;
}

#navigator-toolbox[movingtab] #tabbrowser-tabs {
  padding-bottom: unset !important;
  margin-bottom: unset !important;
}

#navigator-toolbox[movingtab] > #nav-bar {
  margin-top: unset !important;
}

/* window-controls - full screen */
#TabsToolbar #window-controls {display: none !important;}

/* caption buttons - possibly show - needs adjustment for the personal toolbar */
*|*:root[tabsintitlebar]:not([inFullscreen="true"]) #toolbar-menubar[autohide="true"]
 ~ #TabsToolbar .titlebar-buttonbox-container {
  position: fixed !important;
  display: block !important;
  right: 0 !important;
  top: calc(var(--tab-min-height) + var(--captionbox-adjust)) !important;
  height: var(--tab-min-height) !important;
  visibility: visible !important;
}

/* caption buttons - HEIGHT */
.titlebar-buttonbox-container .titlebar-button {
  height: var(--tab-min-height) !important;
  margin: 0px -5px 0px -5px !important;
  padding: 0px !important;
}

/* caption buttons - PADDING */
*|*:root[tabsintitlebar]:not([inFullscreen="true"])
 #toolbar-menubar[autohide="true"] ~
  #TabsToolbar {
   padding-right: 90px !important; /*adjust*/
}

/* END - Tabs on bottom */

Athraithe ag cor-el ar

more options

OMG, thank you so much!!! You're a genius! What kind of education do you have that you know how to write this stuff? It's a wonderful skill!

more options

All of the 'Solutions' above are totally irrelevant.

I had to reinstall 73.0.1 I recovered all items in my profile except Top Sites. I can not add any Top Sites.

All of my top sites were pinned. They were not restored when I restored my profile.

I click the three dots in the upper left corner of the Top Sites area. The drop down menu appears. I select Add Top Site. The Add Top Site dialog appears.

I insert a url, enter a title and insert a custom image url.

I click preview and the correct image appears in the icon box.

I click the Add button and dialog box goes away and absolutely nothing else happens.

I am left with zero Top Sites.

Thanks: MikeD [email address]

Athraithe ag Andrew ar

more options

Hi MikeD

Your problems seem to have nothing to do with the subject of this thread that is about moving the Tab bar from the position above the Navigation Toolbar to the position below the Navigation Toolbar and the Bookmarks Toolbar using code in userChrome.css.

Could you please create a new thread for your question. Thank you.