Using CSS, making a menu button clickable

Question

I'm creating the menu on a mobile website and I'm making the menu button with CSS rather than using an image. I can't seem to make the whole menu button clickable, only the first horizontal line of the menu icon is clickable. What I need to do is make the whole button, plus 10px padding around the button clickable. Here's what I've got 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>

box shadow cant be clicked :D must edit your code !

KeySee
– KeySee

2015-02-03 16:59:38 +00:00
Commented Feb 3, 2015 at 16:59 — KeySee
– KeySee, Commented Feb 3, 2015 at 16:59

Spencer · Accepted Answer · 2015-02-03 17:02:43Z

1

http://codepen.io/anon/pen/emGMVr

This can be achieved by putting the link inside the div and giving it a width and height.

.white-menu-btn {
display: block;
position: relative;
float: right;
height: 30px;
width: 30px;
vertical-align: middle;
padding-right: 0.5em;
cursor: pointer;
}

<div class="white-menu-btn">
      <a href="#" class="right-menu-btn-wrapper">
      </a>
  </div>

answered Feb 3, 2015 at 17:02

Spencer

961 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Billy · Accepted Answer · 2015-02-03 17:00:41Z

0

because there is nothing in it, either add a or some content then add padding, notice the border goes to the next line due to the div inside,these are inproper nesting, you should look into changing them for an unordered list with li's

.right-menu-btn-wrapper{border:1px solid red;}
.second-right-menu-btn-wrapper{border:1px solid green;}

<a href="#" class="right-menu-btn-wrapper">
<div class="white-menu-btn">
</div></a>
<a href="#" class="second-right-menu-btn-wrapper">second button
<div class="white-menu-btn">
</div></a>

answered Feb 3, 2015 at 17:00

Billy

2,4381 gold badge13 silver badges13 bronze badges

Comments

Bishan · Accepted Answer · 2015-02-03 17:42:51Z

0

Your css and html isn't clear that much. You don't want to do this much of code lines to do above task. I'l suggest simple solution for your prob.

Add this css style to your .css file

.buttonNew{
width:100px;
height:50px;
padding:10px;
background-color:#fff;
color:blue;
}

And add this little code line to your .html file

<div class="red-container">
<a href="#" class="buttonNew">Button</a>
</div>

I think this is the solution you hope.

answered Feb 3, 2015 at 17:42

Bishan

4011 gold badge10 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using CSS, making a menu button clickable

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related