Mozilla 도움말 검색

고객 지원 사기를 피하세요. 저희는 여러분께 절대로 전화를 걸거나 문자를 보내거나 개인 정보를 공유하도록 요청하지 않습니다. "악용 사례 신고"옵션을 사용하여 의심스러운 활동을 신고해 주세요.

자세히 살펴보기

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

  • 5 답장
  • 1 이 문제를 만남
  • 1 보기
  • 최종 답변자: 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> _______________

글쓴이 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

모든 댓글 (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.

글쓴이 Rick W 수정일시

more options

선택된 해결법

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 수정일시