Replace the 3 lines in the top menu to a word

• 

  stmaryschoolsherman · Member · Jan 14, 2015 at 11:50 pm

  • Copy link
  • Add topic to favorites

  When viewed on a smart phone, the top menu is represented by 3 horizontal lines. Many of our readers won’t know to touch those lines to reveal the menu items. I’ll like replace those lines with the words Utility Menu, or with the words Calendars Resources Forms. How can I do that?

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

• 

  gracejiyoung · Member · Jan 15, 2015 at 12:30 am

  • Copy link

  Hi there,

  You can add the word Menu after the 3 lines with CSS by adding this:

  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
  	h3.menu-toggle:after {
  		content: "Menu";
  	}
  }

  Let me know if you have any questions with this!

• 

  stmaryschoolsherman · Member · Jan 15, 2015 at 2:00 pm

  • Copy link

  Thanks so much!Sent from my iPhone

• 

  gracejiyoung · Member · Jan 15, 2015 at 8:11 pm

  • Copy link

  You’re very welcome!