Trang web này sẽ có chức năng hạn chế trong khi chúng tôi trải qua bảo trì để cải thiện trải nghiệm của bạn. Nếu một bài viết không giải quyết được vấn đề của bạn và bạn muốn đặt câu hỏi, chúng tôi có cộng đồng hỗ trợ của chúng tôi đang chờ để giúp bạn tại @FirefoxSupport trên Twitter và /r/firefox trên Reddit.

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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

  • 5 trả lời
  • 1 gặp vấn đề này
  • 1 lượt xem
  • Trả lời mới nhất được viết bởi 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> _______________

Được chỉnh sửa bởi cor-el vào

Giải pháp được chọn

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.

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (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.

Được chỉnh sửa bởi Rick W vào

more options

Giải pháp được chọn

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.

Được chỉnh sửa bởi Rick W vào