X
點擊此處開啟此網站的行動版。

技術支援討論區

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

已張貼

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

由 cor-el 於 修改

被選擇的解決方法

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.

從原來的回覆中察看解決方案 0

額外的系統細節

已安裝的外掛程式

  • Shockwave Flash 29.0 r0

應用程式

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

更多資訊

Shadow110 1072 個解決方法 14836 個答案

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
5406 個解決方法 40221 個答案

有幫助的回覆

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
17516 個解決方法 158398 個答案

有幫助的回覆

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>

提出問題者

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.

由 Rick W 於 修改

選擇的解決方法

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.

由 Rick W 於 修改