CSS To Change Hamburger Button Icon

[JYLD]

The following CSS can be used to set your icon image to be used in place of the normal "hamburger" application button in Firefox. I created two png files one for normal and one for effect upon a mouse hover. My png's are copied form the "Giant Firefox Button", referred to in another thread of mine recently. You can use png's of your own choice. The png files chosen get laid into the white space allocated for the hamburger button, as enlarged by the width and height commands. The negative margin lines are needed to force firefox to expand the png images to fill the full amount of the allocated white space.

You will need to make some adjustments to the css to accommodate your file layout and selections. This css was largely taken from and/or inspired by Aris-t2's CustomCSSforFx

Code: Select all

#PanelUI-button #PanelUI-menu-button {
  list-style-image: unset !important;
  -moz-image-region: unset !important;
}

#PanelUI-button .toolbarbutton-icon {
  width: 60px !important;
  height: 28px !important;
  margin-left: -6px !important;
  margin-right: -7px !important;
  margin-top: -7px !important;
  margin-bottom: -7px !important;
  list-style-image: url("file:///C:/Users/Administrator/AppData/Roaming/Mozilla/Firefox/Profiles/j4q022aw.default-release/chrome/image/Firefox1.png") !important;
}

#PanelUI-button:hover .toolbarbutton-icon {
  width: 60px !important;
  height: 28px !important;
  margin-left: -6px !important;
  margin-right: -7px !important;
  margin-top: -7px !important;
  margin-bottom: -7px !important;
  list-style-image: url("file:///C:/Users/Administrator/AppData/Roaming/Mozilla/Firefox/Profiles/j4q022aw.default-release/chrome/image/FirefoxHover1.png") !important;
}

This is a screenshot of my new "hamburger" button replacement. It is the orange "Firefox Button" on the right end of my navigation bar.