I need some assistance with adjusting the position of my mobile hamburger menu icon. It's currently on the left side of the screen, but I want to move it to the right. I've tried making the changes myself using CSS and HTML, but I'm not an expert in these languages. Below, I've included the code I'm working with. Can anyone offer a solution?
`/* Hamburger Menu */
/* Mixin */
/* reset */
* {
padding: 0;
margin: 0;
}
nav {
background-color: #91cfa1;
height: 50px;
padding: 0 16px;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
/* fade in checked menu */
}
nav .m-menu__checkbox {
display: none;
}
nav label.m-menu__toggle {
cursor: pointer;
}
nav .m-menu {
position: absolute;
top: 0;
left: 0;
max-width: 450px;
width: calc(100vw - 30px);
height: 100%;
-moz-transform: translate3d(-450px, 0, 0);
-o-transform: translate3d(-450px, 0, 0);
-ms-transform: translate3d(-450px, 0, 0);
-webkit-transform: translate3d(-450px, 0, 0);
transform: translate3d(-450px, 0, 0);
-moz-transition: transform 0.35s;
-o-transition: transform 0.35s;
-webkit-transition: transform 0.35s;
transition: transform 0.35s;
z-index: 1;
overflow: hidden;
background-color: #fff;
}
nav .m-menu__overlay {
background-color: rgba(103, 103, 103, 0.5);
position: absolute;
top: 0;
width: 100%;
bottom: 0;
z-index: 1;
display: none;
}
nav .m-menu__header {
padding: 0 16px;
height: 50px;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-ms-flex-pack: space-around;
-webkit-align-items: center;
align-items: center;
border-bottom: 1px solid #e8e8e8;
}
nav .m-menu__header span {
font-size: 1.2rem;
font-weight: bold;
text-align: center;
width: 100%;
}
nav .m-menu .m-menu {
-moz-transform: translate3d(480px, 0, 0);
-o-transform: translate3d(480px, 0, 0);
-ms-transform: translate3d(480px, 0, 0);
-webkit-transform: translate3d(480px, 0, 0);
transform: translate3d(480px, 0, 0);
}
nav .m-menu ul {
height: 100%;
overflow-y: auto;
}
nav .m-menu ul li a, nav .m-menu ul li label {
display: block;
text-align: left;
padding: 0 15px;
line-height: 47px;
text-decoration: none;
color: #333;
cursor: pointer;
font-size: 1rem;
border-bottom: 1px solid #e8e8e8;
position: relative;
}
nav .m-menu ul li label.a-label__chevron::after {
content: "";
position: absolute;
display: inline-block;
height: 10px;
width: 10px;
border-color: #333;
border-style: solid;
border-width: 1px 1px 0 0;
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
margin-top: -5px;
right: 16px;
}
nav .m-menu ul li .-invisible {
border-bottom: 0;
}
nav .m-menu .m-menu label.m-menu__toggle {
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flex;
display: flex;
...
</div>