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 and/r/firefox on Reddit.

Avatar for Username

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

This thread was archived. اگر به کمک نیاز دارید لطفاً یک سؤال بپرسید.

Nav-Bar Left & Right Margin Adjust? (nav buttons are not all square)

  • 2 پاسخ
  • 0 have this problem
  • 1 view
  • آخرین پاسخ توسّط Slouch

Slouch
Slouch
more options

Hi All,

Is there a way to make the Nav Bar flush with the left and right margins of the browser?

The way it is now, the margins are a bit too much inward, not reaching the ends of the browser window, which makes the buttons on the ends (Back and Hamburger) too wide, as can be seen by the wide highlight when hovering over them. This makes the end buttons rectangular instead of square.

In FF 88, these buttons were flush with the left and right margins of the window, making all buttons on the Nav Bar square.

I'd like all the Nav Bar buttons to be perfectly square and symmetrical. This apparently requires adjusting the left & right margins of the Nav Bar... or is the Nav Bar just too short causing it to stretch itself to the ends of the window? I'm not sure.

Please see attached 2 images.

Thanks!

Hi All, Is there a way to make the Nav Bar flush with the left and right margins of the browser? The way it is now, the margins are a bit too much inward, not reaching the ends of the browser window, which makes the buttons on the ends (Back and Hamburger) too wide, as can be seen by the wide highlight when hovering over them. This makes the end buttons rectangular instead of square. In FF 88, these buttons were flush with the left and right margins of the window, making all buttons on the Nav Bar square. I'd like all the Nav Bar buttons to be perfectly square and symmetrical. This apparently requires adjusting the left & right margins of the Nav Bar... or is the Nav Bar just too short causing it to stretch itself to the ends of the window? I'm not sure. Please see attached 2 images. Thanks!
Attached screenshots

Modified by Slouch

All Replies (2)

Slouch
Slouch Question owner
more options

It appears this issue is more related to the size of the nav button containers.

Maybe this toolbox view will help (see attached images).

The buttons in FF88 are all in uniform-sized containers (57 x 50).

The buttons in FF115 are not in uniform-sized containers. Back & Hamburger buttons are in containers which are 64 x 50. The other nav buttons are in containers that are 58 x 50.

The purple area in the toolbox view apparently shows the button containers.

Is there a way to have uniform button containers in FF 115 & FF 125?

Modified by Slouch

Slouch
Slouch Question owner
more options

I'm also adding text to my nav buttons with the following code. Is this code affecting the size of the nav button containers? 

toolbar .toolbarbutton-1[label]{
  flex-direction: column;
  align-items: center !important;
}
toolbar .toolbarbutton-1[label]:not([disabled]):hover{ background-color: var(--toolbarbutton-hover-background) !important; }

toolbar .toolbarbutton-1[label] > .toolbarbutton-icon,
toolbar .toolbarbutton-1[label] > .toolbarbutton-badge-stack{
  padding: var(--toolbarbutton-inner-padding) !important;
  padding-bottom: 0px !important;
  height: calc(var(--toolbarbutton-inner-padding) + 16px) !important;
  border: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

toolbar .toolbarbutton-1[label] > .toolbarbutton-text {
  display: flex !important;
  min-height: 16px !important;
  padding-top: 3px !important;
  padding-bottom: 6px !important;
  background-color: transparent !important;
  overflow: hidden;
  width: 9ch; /* changes space between buttons */
}
toolbar .toolbarbutton-1[label] > .toolbarbutton-text::before{
  margin-inline: auto;
}
:root:not([uidensity="compact"]) toolbar .toolbarbutton-1[label] > .toolbarbutton-text{ padding: 2px !important; }

Modified by Slouch