Mobile Green Hammer Menu

It's Hammer Time!

Are you trying to use the Amazing World Anvil Green Hammer button on your mobile device? Do you sometimes consider hitting the menu button with a hammer? Struggle no more, we have a small CSS hack that makes this popup menu usable on smaller real estate.

Instructions

Copy and paste the following CSS code into:
World Settings > Styling > CSS Tab > PRESENTATION CASCADE STYLESHEETS (CSS).

Caution - Warning - Attention!

After pasting this code remove the space between the / * for the CSS comments. By placing the space here it allows the CSS comments to be shown and gives clarity for each section. You have been warned that your CSS may catch fire.

/ * GREEN HAMMER BUTTON */


[id^=super-button-c] {
  right: 60px !important;
}


/ * PURPLE BUTTON */


[id^=super-article-button-c] {
  right: 120px !important;
}
 
/ * GREEN HAMMER BUTTON MENU */


.user-css-presentation div#super-button-menu {
  border-radius: 20px;
  height: 80vh;
  margin: 10px;
  overflow: hidden;
  position: fixed;
    bottom: 85px;
    right: 60px;
  width: 100%;
    max-width: 800px;
  z-index: 999999;
}


@media (max-width: 800px) {
  .user-css-presentation div#super-button-menu {
    height: 65vh;
    overflow: hidden;
    position: fixed;
      bottom: 85px;
      right: 0px;
    width: 100%;
      max-width: 300px;
  }
}


/ * CONTENT SCROLLER */


.user-css-presentation div#super-button-menu .row {
  height: 60vh;
  overflow-y: scroll;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--bs-gutter-y) * -1) ;
  margin-right: calc(var(--bs-gutter-x)/ -2) ;
  margin-left: calc(var(--bs-gutter-x)/ -2) ;
  margin-left: -20px;
}


@media (max-width: 800px) {
  .user-css-presentation div#super-button-menu .row {
    height: 40vh;
  }
}


/ * CONTENT COLUMN WIDTH */


@media (max-width: 800px) {
  .user-css-presentation div#super-button-menu .col-md-3.col-sm-4.col-xs-4 {
    display: block;
    width: 100%
  }
}


/ * LINKS */


.user-css-presentation div#super-button-menu li a,
.user-css-presentation div#super-button-menu .col-md-3.hidden-sm.hidden-xs ul.list-unstyled li a {
  background-color: white;
  border-radius: 10px;
  color: black;
  display: block;
  margin: 5px;
  padding: 5px;
  padding-left: 10px;
  text-decoration: none;
  width: 100%;
}


/ * LAST SECTION FORMATTING */


@media ( max-width: 800px) {
  .user-css-presentation div#super-button-menu .col-md-3.hidden-sm.hidden-xs {
    border-left: none !important;
    border-top: 1px solid !important;
    display: block !important;
    width: 100%
  }
}

Man Pounding Hammer by Hannah Gibbs on Unsplash