?
Solved

Problem changing hamburger icon into a real hamburger icon

Posted on 2016-09-17
5
Medium Priority
?
119 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 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

752 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