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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

How can I move the Open Menu (hamburger) button to the Left side with Firefox 60 using CSS in the Userchrome.css file?

  • 5 uphendule
  • 1 inale nkinga
  • 171 views
  • Igcine ukuphendulwa ngu Rick W

more options

I want to combine two customizations in Firefox 60: 1 Move the tabs to below the Address bar and Bookmarks toolbar; and 2. Move the Open Menu (hamburger) button to the left hand side in Firefox 60. Unfortunately, "customize" does not allow one to move the Open Menu button in FF60 (it is greyed out in "Customize"). I can do each of these steps separately with the following CSS customizations in the UserChrome.css file inside my profile, but am not sure how to combine the two together. For 1. the following works: https://support.mozilla.org/en-US/questions/1185426 For 2. the following works: https://github.com/Timvde/UserChrome-Tweaks/blob/master/hamburger/move-to-top-left-Linux-Windows.css but combining them messes up the position of the Open Menu button - I am not skilled in CSS. Can anyone suggest a CSS that will do both tasks together? Or is there a simpler solution to both that I am missing?

The two CSS respectively are: 1. Move the tabs to below the address bar and bookmarks toolbar: ________________

/* Tab bar below Navigation & Bookmarks Toolbars
  For best results, show Title Bar or Menu Bar */
  #nav-bar { /* main toolbar */
  -moz-box-ordinal-group: 1 !important;
  border-top-width: 0 !important; 
   }
    #PersonalToolbar { /* bookmarks toolbar */
   -moz-box-ordinal-group: 2 !important;
   }
   #TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }

________________ 2. Move the Open Menu button to the LHS: ________________

/*
 * Move the hamburger menu to the top left, before the first tab
 *
 * Contributor(s): Alex Vallat
 */

#PanelUI-button {
  -moz-box-ordinal-group: 0;
  border-left: none !important;
  position: absolute;
}

:root[uidensity=compact] #PanelUI-button {
  margin-top: -28px;
}

#PanelUI-button {
  margin-top: -30px;
}

:root[uidensity=touch] #PanelUI-button {
  margin-top: -36px;
}

#TabsToolbar {
  /* Ensure the padding is always present even when maximized */
  padding-inline-start: 40px !important;
}

_______________

I want to combine two customizations in Firefox 60: 1 Move the tabs to below the Address bar and Bookmarks toolbar; and 2. Move the Open Menu (hamburger) button to the left hand side in Firefox 60. Unfortunately, "customize" does not allow one to move the Open Menu button in FF60 (it is greyed out in "Customize"). I can do each of these steps separately with the following CSS customizations in the UserChrome.css file inside my profile, but am not sure how to combine the two together. For 1. the following works: https://support.mozilla.org/en-US/questions/1185426 For 2. the following works: https://github.com/Timvde/UserChrome-Tweaks/blob/master/hamburger/move-to-top-left-Linux-Windows.css but combining them messes up the position of the Open Menu button - I am not skilled in CSS. Can anyone suggest a CSS that will do both tasks together? Or is there a simpler solution to both that I am missing? The two CSS respectively are: 1. Move the tabs to below the address bar and bookmarks toolbar: ________________ <pre><nowiki>/* Tab bar below Navigation & Bookmarks Toolbars For best results, show Title Bar or Menu Bar */ #nav-bar { /* main toolbar */ -moz-box-ordinal-group: 1 !important; border-top-width: 0 !important; } #PersonalToolbar { /* bookmarks toolbar */ -moz-box-ordinal-group: 2 !important; } #TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; } </nowiki></pre> ________________ 2. Move the Open Menu button to the LHS: ________________ <pre><nowiki>/* * Move the hamburger menu to the top left, before the first tab * * Contributor(s): Alex Vallat */ #PanelUI-button { -moz-box-ordinal-group: 0; border-left: none !important; position: absolute; } :root[uidensity=compact] #PanelUI-button { margin-top: -28px; } #PanelUI-button { margin-top: -30px; } :root[uidensity=touch] #PanelUI-button { margin-top: -36px; } #TabsToolbar { /* Ensure the padding is always present even when maximized */ padding-inline-start: 40px !important; } </nowiki></pre> _______________

Okulungisiwe ngu cor-el

Isisombululo esikhethiwe

Thank you the-edmeister and cor-el. Cor-el's solution (see below) was simpler, and works better. The-edmeister, your solution worked partly, but I also needed to add a blank space to ensure other icons did not overlap with the Open Menu button. Cor-el's line also combines well with the CSS code to move the tabs to below the address bar and the bookmarks toolbar. And I discovered how to change the color of the Open Menu button as well! Many thanks for your help. If anyone can advise the CSS code for the Overflow Menu double arrows, I will really be sorted (Presently they hide under the X close window, unless the title bar or menu bar is open). My resultant combined code is below.

/* Tab bar below Navigation & Bookmarks Toolbars - For best results, show Title Bar or Menu Bar */

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

/* Move the Open Menu, 3-bar button to the left & change its color */

 #PanelUI-button {
  -moz-box-ordinal-group: 0 !important; 
  color: blue;
  }

PS For anyone needing to know, the userchrome.css file sits in the chrome folder inside your firefox profile.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0

All Replies (5)

more options

You can combine in usserChrome several instructions as long as have syntax correct.

more options

Just a WAG (wild-assed-guess) - conflicting scripts?

Do #1 and #2 work separately? IOW, when either is used separate from the other. Not something I would be interested in, so I didn't test that combination of codes.

#TabsToolbar { /* tab bar */
 -moz-box-ordinal-group: 3 !important;
   }

That moves the tab-strip down

#PanelUI-button {
  -moz-box-ordinal-group: 0;
  border-left: none !important;
  position: absolute;
}

then with #2 you move the PanelUI the where the tab-strip used to be.

more options

Try to use only this code to move the "3-bar" menu button to the left end and leave out the code to adjust the margin-top

#PanelUI-button { -moz-box-ordinal-group: 0 !important; }
more options

Thanks, the-edmeister and cor-el, I will try these tomorrow (hopefully) and re-post (now I'm on a different computer). Thanks for re-formatting the css code, cor-el, as it came out messy when I submitted the text. Yes, both option #1 and option #2 did work separately, correctly. I think the Open Menu (3-bar) is there, as it appeared when I added the FF title bar, and also the Menu bar, but it was otherwise inaccessible, and disappears when the title bar and menu bar are gone.

Okulungisiwe ngu Rick W

more options

Isisombululo Esikhethiwe

Thank you the-edmeister and cor-el. Cor-el's solution (see below) was simpler, and works better. The-edmeister, your solution worked partly, but I also needed to add a blank space to ensure other icons did not overlap with the Open Menu button. Cor-el's line also combines well with the CSS code to move the tabs to below the address bar and the bookmarks toolbar. And I discovered how to change the color of the Open Menu button as well! Many thanks for your help. If anyone can advise the CSS code for the Overflow Menu double arrows, I will really be sorted (Presently they hide under the X close window, unless the title bar or menu bar is open). My resultant combined code is below.

/* Tab bar below Navigation & Bookmarks Toolbars - For best results, show Title Bar or Menu Bar */

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

/* Move the Open Menu, 3-bar button to the left & change its color */

 #PanelUI-button {
  -moz-box-ordinal-group: 0 !important; 
  color: blue;
  }

PS For anyone needing to know, the userchrome.css file sits in the chrome folder inside your firefox profile.

Okulungisiwe ngu Rick W