X
Tap here to go to the mobile version of the site.

Support Forum

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

Posted

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> _______________

Modified by cor-el

Chosen solution

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.

Read this answer in context 0

Additional System Details

Installed Plug-ins

  • Shockwave Flash 29.0 r0

Application

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0

More Information

Shadow110 1072 solutions 14836 answers

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

You can combine in usserChrome several instructions as long as have syntax correct. *https://www.userchrome.org/ Site Is from a Contributor here.
the-edmeister
  • Top 25 Contributor
  • Moderator
5411 solutions 40310 answers

Helpful Reply

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.

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.'' <blockquote><pre><nowiki>#TabsToolbar { /* tab bar */ -moz-box-ordinal-group: 3 !important; } </nowiki></pre></blockquote> That moves the tab-strip down <blockquote><pre><nowiki> #PanelUI-button { -moz-box-ordinal-group: 0; border-left: none !important; position: absolute; } </nowiki></pre></blockquote> then with #2 you move the PanelUI the where the tab-strip used to be.
cor-el
  • Top 10 Contributor
  • Moderator
17585 solutions 159079 answers

Helpful Reply

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; }
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 <pre><nowiki>#PanelUI-button { -moz-box-ordinal-group: 0 !important; }</nowiki></pre>

Question owner

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.

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.

Modified by Rick W

Chosen Solution

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.

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.

Modified by Rick W