Problem changing hamburger icon into a real hamburger icon

I have a responsive menu which turns into a "hamburger" icon when in mobile mode. However, it only has 2 lines instead of the 3 line in standard hamburger icon. I am having problem getting the 3rd line in.

I have the fiddle https://jsfiddle.net/u2k50dkv/15/ What I want is a 3 lines hamburger icon and also turning into an 'X" when the menu is displayed.

I want it be done only through the /* for mobile devices */ section of the CSS. Is it possible without javascript?

Thank you for your help.

CSSJavaScript

Last Comment

Jack

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

David S.

9/18/2016

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

David S.

9/19/2016

I have an after thought about the hamburger icon after seeing this http://exisweb.net/mobile-menu-abtest

I am wondering what would it take to simply change the 3 bards to the word "MENU"?

Thank you.

You're welcome.

To do that, you start by adding the word "menu" to the links in the HTML. Then you remove the style rules for "#nav > a:before", "#nav > a:after", and "#nav > a > span". Finally you make changes to the rules for "#nav > a":

   #nav > a {
    min-width: 1.125em;
    padding: 1em;
    line-height: 1.125;
    /* 50 */
    text-align: center;
    background-color: #000;
    position: relative;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
  }
  #nav:not(:target) > a:first-of-type,
  #nav:target > a:last-of-type {
    display: inline-block;
  }