On small screens, there wouldn’t be much difference because the button / menu is centered,
On tablets you would use the stuff from above but just flip the left properties to right
If you are not sure what I mean, you can also just add this at the bottom of the code above:
#mobile-menu {
left: unset;
right: 20px;
&:hover {
left: unset;
right: 15px;
}
}
@media (min-width: 769px) {
.background {
left: unset;
right: 0;
&.active {
left: unset;
right: 15px;
}
}
}
To get this:
You can use an RGBA color as the background for the class background like so:
.background {
background-color: rgba(255,255,255, .7);
}