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

How do I move the tabs on bottom (directly above webpage) and while Private Browsing ? FF65

  • 5 replies
  • 1 has this problem
  • 1 view
  • Last reply by stevewack

more options

Basically Firefox 65 rolled up and brought back the tabs on top and broke the css. I want the tabs to be right above the webpage. Like this: https://imgur.com/v6byBhV

I currently have a css code I found that I'm using to achieve that result:

/* 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 {
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;}

I don't know what's important and what isn't, so I haven't touched it much.

The problem though is that in Private Browsing it gets messed up. Here's what I mean: https://imgur.com/PQ8ZjVp I have 2 tabs opened there.

(Also I just noticed how Youtube's search bar doesn't appear, that's because it has been moved slightly off the of where I cropped the screenshot. Not the code's fault since I tried without it. Private browsing caused that which makes me question what else changes)

After some searching I found this code:

#TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator {
position: absolute !important;
right: 0;
bottom: 1px;
}

But then that introduces this problem: https://imgur.com/kO5w538 the Private Browsing icon overlaps with the "open a new tab" icon or the "List all tabs" icon if there are too many tabs open. That makes me believe that at some point, the mask icon was detached or something.

I would appreciate some help for either a new code for moving the tabs to the bottom, or fixing the Private Browsing tab.

Here are all the images in a single post https://imgur.com/a/5a7e0fV .

Basically Firefox 65 rolled up and brought back the tabs on top and broke the css. I want the tabs to be right above the webpage. Like this: https://imgur.com/v6byBhV I currently have a css code I found that I'm using to achieve that result: <code> /* 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 { 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;} </code> I don't know what's important and what isn't, so I haven't touched it much. The problem though is that in Private Browsing it gets messed up. Here's what I mean: https://imgur.com/PQ8ZjVp I have 2 tabs opened there. (Also I just noticed how Youtube's search bar doesn't appear, that's because it has been moved slightly off the of where I cropped the screenshot. Not the code's fault since I tried without it. Private browsing caused that which makes me question what else changes) After some searching I found this code: <code> #TabsToolbar:not([inFullscreen="true"]) > .private-browsing-indicator { position: absolute !important; right: 0; bottom: 1px; } </code> But then that introduces this problem: https://imgur.com/kO5w538 the Private Browsing icon overlaps with the "open a new tab" icon or the "List all tabs" icon if there are too many tabs open. That makes me believe that at some point, the mask icon was detached or something. I would appreciate some help for either a new code for moving the tabs to the bottom, or fixing the Private Browsing tab. Here are all the images in a single post https://imgur.com/a/5a7e0fV .

Modified by MainGoldDragon

Chosen solution

cor-el said

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

Well like I said, I know nothing about coding so I don't know what works on FF65 or even where I can search for what works on it. (sorry for the confusion, I'm not good at explaining things)

Also I guess I kind of forgot to update this post that I actually did find a solution with this:

#nav-bar { /* Main Toolbar */
  -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* Bookmarks Toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#titlebar { /* Menu + Tab Bar */
  -moz-box-ordinal-group: 3 !important;
}

That moves the Tab Bar on the bottom, but it also drags the Menu Bar (File, Edit, View....) for some #&@*#$% reason, so I use this to fix it:

/* Menu Bar on top */

#navigator-toolbox{ 
  margin-top: 11px;
  padding-top: 8px !important; 
}
#toolbar-menubar{
  position: fixed;
  top: 0px;
}

The most annoying part is that I have to basically detach that menu bar, create some spacing on top and then move the detached menu bar on that space. I would very much prefer to just move it just like another bar because my OCD is killing me.

Oh and for another *$&%)@! reason there is a vertical shift when moving a tab that this code overrides:

/* 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;
}

And that's pretty much all the css code that I use to keep the bars in place and working the way they should.

There is only one thing that bothers me A LOT though and I would appreciate a solution. That's the Menu Bar I mentioned above. I hate to have being essentially detached and I have to put it in it's place with some Margin and Padding. I think it also messes up the Title Bar if you have that disabled big time (I've got it enabled).

Read this answer in context 👍 0

All Replies (5)

more options

If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area.

more options

cor-el said

If you position elements absolutely then you need to create space (padding or margin) to avoid overlapping other elements. The #main-window code you posted above does this for the Tab bar in the #navigator-toolbox container. You will have to check and modify all code you use to position elements in this toolbox area.

Thank you for the reply but it is fair to say that I know nothing about coding. You say that by positioning elements absolutely then it creates overlaps. That must mean that there is an alternative way to position elements without overlaps. I don't know what to modify though. I hate paddings and margins. I don't want to change to change the widths. I don't want to add spacings. I don't want to change colors. I don't want to change to change the heights. I just want to take each bar and put in its place like this https://imgur.com/v6byBhV

The code below is the one I was using to have the bars in place until FF 65.0 rolled up destroyed it.

#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
} 
#PersonalToolbar { /* bookmarks toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#TabsToolbar { /* tab bar */
  -moz-box-ordinal-group: 3 !important;
}

Maybe it's easier to fix That code instead of trying to find a new one or fixing the bigger one ? All I want to do is move tabs to the bottom.

BTW the first code I posted was from your answer here https://support.mozilla.org/en-US/questions/1248277#answer-1192325

Modified by MainGoldDragon

more options

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

more options

Chosen Solution

cor-el said

The code you initially posted above is the only code that works in Firefox 65+ to get the tabs on bottom. You would have to start with this code and then add your other code and check how it needs to be modified for Firefox 65+.

Well like I said, I know nothing about coding so I don't know what works on FF65 or even where I can search for what works on it. (sorry for the confusion, I'm not good at explaining things)

Also I guess I kind of forgot to update this post that I actually did find a solution with this:

#nav-bar { /* Main Toolbar */
  -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* Bookmarks Toolbar */
  -moz-box-ordinal-group: 2 !important;
}
#titlebar { /* Menu + Tab Bar */
  -moz-box-ordinal-group: 3 !important;
}

That moves the Tab Bar on the bottom, but it also drags the Menu Bar (File, Edit, View....) for some #&@*#$% reason, so I use this to fix it:

/* Menu Bar on top */

#navigator-toolbox{ 
  margin-top: 11px;
  padding-top: 8px !important; 
}
#toolbar-menubar{
  position: fixed;
  top: 0px;
}

The most annoying part is that I have to basically detach that menu bar, create some spacing on top and then move the detached menu bar on that space. I would very much prefer to just move it just like another bar because my OCD is killing me.

Oh and for another *$&%)@! reason there is a vertical shift when moving a tab that this code overrides:

/* 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;
}

And that's pretty much all the css code that I use to keep the bars in place and working the way they should.

There is only one thing that bothers me A LOT though and I would appreciate a solution. That's the Menu Bar I mentioned above. I hate to have being essentially detached and I have to put it in it's place with some Margin and Padding. I think it also messes up the Title Bar if you have that disabled big time (I've got it enabled).

Modified by MainGoldDragon

more options

Does anyone know how to make the nav icons larger? The back/forward/home etc?