Mobile-Specific CSS

• 

  whoatrippy · Member · Jul 17, 2016 at 11:55 pm

  • Copy link
  • Add topic to favorites

  When viewing my website (drumpfing.com) on the mobile site, the “menu” button doesn’t draw any attention. It starts as grey on grey until it’s actually clicked (turns green).
  How can I change its appearance to add something like a hamburger button next to “menu” or add/change the text and color?

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Jul 18, 2016 at 3:25 pm

  • Copy link

  Here’s how to set the text and background colours for the menu button for it’s normal and hover states – just add in your preferred hex colour codes:

  .menu-toggle {
  	color: #00f;
  	background-color: #ff0;
  }
  .menu-toggle:hover {
  	color: #0f0;
  	background-color: #f0f;
  }
  .menu-toggle:after {
  	content: "≡";
  	margin-left: 10px;
  }

  The last bit adds the mathematical identical to sign which seems to be pretty close to the hamburger button. You can switch before/after and left/right in the code if you want it on the other side.

• 

  whoatrippy · Member · Jul 18, 2016 at 4:39 pm

  • Copy link

  Awesome! Thanks for the explanation too (made it very easy to understand for a guy that can’t even call himself novice in all this). Much appreciated!