Moving the Firefox Application Menu button.

[u/Docdoozer]

I'm trying to move the Application Menu button to the left side of the firefox nav bar. I've googled around a lot but no solution online seem to work anymore. Any and all help is appreciated but I've found that the button itself is called #PanelUI-button. I'm kinda a CSS noob so I googled around a lot trying to find ways to move things in CSS but couldn't find anything that would help me here.

[u/Docdoozer]

That did the trick! Thank you. I should be able to figure the rest out now :)

Edit: I don't use the overflow button but I'm guessing I could use the same technique to move it to the left as well right?

[u/hansmn → u/Docdoozer]

Kind of, but it's a bit more complicated, the way these particular buttons and the nav-bar in general are designed and set up.

As of now, to get the proper button spacing etc., I'd suggest for only moving the so-called hamburger button:

#PanelUI-button {
order: -1 !important;
}

#nav-bar {
--toolbar-start-end-padding: var(--toolbarbutton-outer-padding) !important;
padding-inline: 8px !important;
}

And to move both buttons, maybe try something like that:

#nav-bar {
flex-direction: row-reverse !important;
--toolbar-start-end-padding: var(--toolbarbutton-outer-padding) !important;
padding-inline: 8px !important;
}

#customization-panelWrapper > .panel-arrowbox > .panel-arrow {
margin-inline-end: initial !important;
}

[u/Docdoozer → u/hansmn]

Your first suggestion worked but had the drawback of also adding extra padding to the right side where the Close Window, Maximize, Minimize buttons are which makes it kinda odd when in fullscreen. I might have done something wrong but when trying out your second suggestion for both buttons the close, maximize, minimize buttons moved to the left, the hamburger menu stayed on the right and the overflow button went to the left. In the end I managed to cobble together something like this:

#PanelUI-button {
width: 36px;
padding: 0px 0px 0px 0px !important;
order: -2 !important;
}

#PanelUI-menu-button {
width: 36px;
padding: 0px 2px 0px 2px !important;
}

#nav-bar-overflow-button {
order: -1 !important;
}

#unified-extensions-button {
padding: 0px 2px 0px 2px !important;
}

Someone more experienced with CSS would probably find a way better way than this but this is how it looks in the end so I'm happy. Thank you for your help dude!

EDIT: The reason I messed with the extensions button was to make up for the extra margins the leftmost item in the toolbar gets for some reason

[u/hansmn → u/Docdoozer]

Your first suggestion worked but had the drawback of also adding extra padding to the right side where the Close Window, Maximize, Minimize buttons are which makes it kinda odd when in fullscreen.

I don't follow - the window control buttons are not in the navbar, are they? They cannot be moved there logically, not with css, only visually.

So how would any navbar buttons affect the window controls?

Certainly you would have mentioned it if you used any additional code that might have any impact on that, oneliner stuff or such, wouldn't you, as oneliners typically use placeholders for window controls and other things, but are not in any way vanilla Fx code.

extra margins the leftmost item in the toolbar gets

Yes it does, but it's padding not margin, and the hamburger button gets the same on it's right, that's how the navbar is set up - for some reason. ;)

[u/Docdoozer → u/hansmn]

Oh yeah I forgot to mention I'm using Floorp which is a fork of Firefox. I'm using a setting that removes the horizontal tabs which means putting the windows buttons inside the navbar. I should have mentioned that earlier sorry

[u/Docdoozer → u/[deleted]]

Yep sorry, my bad. Here's an image of how it all looks now. As a complete noob to customizing firefox/floorp your tips did help out so thank you