Can custom CSS enable addition of the word MENU near hamburger icon?

• 

  skruskopf · Member · Nov 11, 2015 at 4:14 am

  • Copy link
  • Add topic to favorites

  I am wondering if custom CSS would allow me to add the word “MENU” near the hamburger icon in the Illustratr theme. Many usability studies support this suggestion (believe it or not, many mobile users do NOT know what the hamburger menu is if only the icon is shown). I’ve asked the theme developers to add this functionality, but they believe it isn’t necessary. However, I convinced the ZeroGravity theme developers to do this as an option in the free program for a non-profit event site I built.

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

• 

  thesacredpath · Member · Nov 11, 2015 at 7:10 am

  • Copy link

  Hi there, let’s give this a try and see what you think.

  .genericon-menu::after {
      border-right: 1px solid #f1f2f3;
      content: "f419";
      padding-right: 10px;
  }
  .genericon-menu::before {
      content: "MENU";
      font-family: arial,helvetica,sans-serif;
      font-weight: bold;
      padding-right: 5px;
      position: relative;
      top: -2px;
      border-left: 1px solid #f1f2f3;
      padding-left: 10px;
  }
  main-navigation .menu-toggle {
      border: none;
      margin-left: -45px;
  }

  Due to the way the hamburger was added, this is sort of a round-about way of getting Menu beside the icon.

• 

  thesacredpath · Member · Nov 11, 2015 at 7:12 am

  • Copy link

  Oh wait, we need to make an adjustment with the menu is toggled open. Add this below the other CSS above.

  .toggled .menu-toggle {
      width: 100px;
  }

• 

  skruskopf · Member · Nov 12, 2015 at 3:54 am

  • Copy link

  Thank you for looking at this. But I’m in somewhat of a “catch 22”: I don’t currently have the premium package for my site, so I can’t test the custom CSS to determine if it would work. But I will save your code for when I do upgrade! (But hopefully the developers for this theme will build the functionality into the theme options, like other themes that have it.)

• 

  thesacredpath · Member · Nov 12, 2015 at 5:19 am

  • Copy link

  @sksens, you can try out and preview custom CSS before you buy as explained here.

  Let me know if you have an problems.

• 

  skruskopf · Member · Nov 14, 2015 at 1:02 am

  • Copy link

  That “Try Now” option is really slick! However, even though MENU appeared as I expected, there is a graphic element behind the hamburger icon and it didn’t adjust to accommodate the word MENU. I might go Premium anyway, so ads don’t appear and I can adjust other aspects.

  Thanks for your help! I will save your code!

• 

  thesacredpath · Member · Nov 14, 2015 at 5:06 am

  • Copy link

  You are welcome, and if you go Premium and need help with CSS, please let us know.