Currently, I am working on the menu for a mobile website. Instead of using an image, I have decided to create the menu button using CSS. However, I am facing an issue where only the first horizontal line of the menu icon is clickable, and I want the entire button along with a 10px padding around it to be clickable. Here is what I have tried so far:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test website</title>
<style>
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body,html {
margin:0;
padding:0;
}
.red-container{
position:fixed;
right: 0;
top: 0;
left: 0;
width:100%;
background-color:#cc0000;
padding:0.5em 1em 0.5em 1em;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
font-size: 1.8em;
font-weight:700;
}
.red-container:before {
content: 'Page';
display: inline-block;
vertical-align: middle;
}
.right-menu-btn-wrapper{
display: inline-block;
position: relative;
float:right;
padding: 0.1em;
vertical-align: middle;
background-color: #0000ee;
}
.white-menu-btn {
display: inline-block;
position: relative;
float: right;
vertical-align: middle;
padding-right: 0.5em;
cursor: pointer;
}
.white-menu-btn:before {
content: "";
position: absolute;
left: 0;
top: 0.25em;
width: 1em;
height: 0.15em;
background: white;
box-shadow:
0 0.25em 0 0 white,
0 0.5em 0 0 white;
}
</style>
</head>
<body>
<!-- Red Header -->
<div class="red-container">
<a href="#" class="right-menu-btn-wrapper">
<div class="white-menu-btn">
</div></a>
</div>
<!-- END Red Header -->
</body>
</html>