Add a border to the menu button
This way we make it more obvious that it's clickable and, since adding a border requires adding padding, we increase the touch area, making it easier to use and more accessible for users with motor disabilities. Since now the button looks like a button, we don't need the pointer cursor Foundation adds to hamburger icons and can use the default cursor browsers provide for buttons.
This commit is contained in:
@@ -668,11 +668,15 @@ body > header,
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
border: 1px solid;
|
||||
border-radius: $button-radius;
|
||||
color: inherit;
|
||||
padding: 0.6em;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@include hamburger($color: currentcolor, $color-hover: currentcolor);
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.title-bar {
|
||||
|
||||
Reference in New Issue
Block a user