Solved

Problem changing hamburger icon into a real hamburger icon

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 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

12 Experts available now in Live!

Get 1:1 Help Now