Solved

Problem changing hamburger icon into a real hamburger icon

Posted on 2016-09-17
5
110 Views
Last Modified: 2016-09-19
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.
0
Comment
Question by:Jack
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 42

Accepted Solution

by:
David S. earned 500 total points
ID: 41803848
To add a third line to the icon, add a <span> to the links and then change the vertical offsets for the existing lines and add a rule for the <span> to set its vertical offset too (and add to the selectors for the shared rule to apply to the span as well). Also it's best to use more than the title attribute to provide text for an element. When you don't want to have text inside the element, use the "aria-label" attribute.
	<a href="#nav" title="Show navigation" aria-label="Show navigation"><span></span></a>
	<a href="#" title="Hide navigation" aria-label="Hide navigation"><span></span></a>

Open in new window


You can use CSS3 transforms to make an "x" by rotating one line by 45 degrees and another by 45 degrees the other way (and hiding the 3rd line, though in this case, since you're using separate open and close links, you could also just not include the <span> in the close link).

I updated the fiddle but I'll post the changes to the code below too.

#nav > a:before, #nav > a:after, #nav > a > span {
	border: 1px solid #fff;
	content: "";
	left: 25%;
	position: absolute;
	right: 25%;
	top: 26%;
}
#nav > a:after {
	top: 70%;
}
#nav > a > span {
	top: 48%;
}

#nav > a + a:before {
	top: 48%;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#nav > a + a:after {
	top: 48%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
#nav > a + a > span {
	opacity: 0;
}

Open in new window

Normally the "content" property is only used for the ":before" and ":after" pseudo-elements, but since the <span> here is empty anyway, it won't hurt to apply that declaration to it as well.
0
 
LVL 42

Expert Comment

by:David S.
ID: 41805270
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;
  }

Open in new window

Here's the updated Fiddle.
0
 

Author Comment

by:Jack
ID: 41805619
Hi David,

There is a problem with the word 'Menu'.  It is showing up in the desktop version and it also has a different font.
0
 
LVL 42

Expert Comment

by:David S.
ID: 41805710
This "#nav > a" rule needs to be outside the media query (it's been inside it):
#nav > a {
	display: none;
}

Open in new window

There's a rule for "ul.dropdown" which sets some of the font-* properties. You probably want to change the selector from "ul.dropdown" to "#nav".
0
 

Author Comment

by:Jack
ID: 41805766
Thank you!
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question