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 to stop bars from moving when moving tabs?

  • 6 replies
  • 1 has this problem
  • 35 views
  • Last reply by qwerty123z

more options

I am using Firefox 57.0.4

I moved my tabs to the bottom using what's shown below in userChrome:

/* Tab bar below Navigation & Bookmarks Toolbars */
#nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  box-shadow: none !important;
  border-top-width: 0 !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;
}

When I try to move one of my tabs the bars above it move up slightly. Is there a way to stop the bars above my tabs from moving when I move one of my tabs?

I couldn't upload images when creating this post, so I uploaded the problem in imgur: https://imgur.com/a/BjOoR

If you notice in the second picture the address bar is overlapping the menu bar.

I am using Firefox 57.0.4 I moved my tabs to the bottom using what's shown below in userChrome: <pre><nowiki>/* Tab bar below Navigation & Bookmarks Toolbars */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; box-shadow: none !important; border-top-width: 0 !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; }</nowiki></pre> When I try to move one of my tabs the bars above it move up slightly. Is there a way to stop the bars above my tabs from moving when I move one of my tabs? I couldn't upload images when creating this post, so I uploaded the problem in imgur: https://imgur.com/a/BjOoR If you notice in the second picture the address bar is overlapping the menu bar.

Modified by cor-el

Chosen solution

Wow, I never noticed that before. This is caused by the following built-in style rules:

/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#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;
}
Read this answer in context 👍 1

All Replies (6)

more options

Try to add this rule to see if that makes a difference.

:root {
  --tab-toolbar-navbar-overlap: 0px !important;
}
more options

cor-el said

Try to add this rule to see if that makes a difference.
:root {
  --tab-toolbar-navbar-overlap: 0px !important;
}

Thanks for the reply, I tried that but it didn't change anything/work.

Modified by qwerty123z

more options

Screen of the error?

more options

WestEnd said

Screen of the error?

I posted it in my imgur link since the picture wasn't uploading on here at the time of my post. I just uploaded the pictures again in this post.

In the pictures if you look at the nav-bar. One of the pictures will appear fine but when I try moving a tab around the nav-bar will move up and overlap a bit of the menu buttons.

more options

Chosen Solution

Wow, I never noticed that before. This is caused by the following built-in style rules:

/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#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;
}
more options

jscher2000 said

Wow, I never noticed that before. This is caused by the following built-in style rules:
/* The next 3 rules allow dragging tabs slightly outside of the tabstrip
* to make it easier to drag tabs. */
#TabsToolbar[movingtab] {
  padding-bottom: 15px;
}
#TabsToolbar[movingtab] > .tabbrowser-tabs {
  padding-bottom: 15px;
  margin-bottom: -15px;
}
#TabsToolbar[movingtab] + #nav-bar {
  margin-top: -15px;
  pointer-events: none;
}

To override those, try:

/* Override vertical shifts when moving a tab */
#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;
}

Thank you, this solved it.