Solved

Problem changing hamburger icon into a real hamburger icon

Posted on 2016-09-17
5
79 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

947 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now