Solved

Problem changing hamburger icon into a real hamburger icon

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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone 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

Suggested Solutions

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

809 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