Help setting burger icon to an active element to change from 'MENU' to OPEN/CLOSE

Store Design
1

I’d like to change the text on my site from menu to OPEN and CLOSE instead of the text MENU which I removed the burger icon and replaced it with. I managed to use an if statment however i couldn’t set it as active as my knowledge is novice at best. This is what I currently use in my theme file. My site is www.moore-gaming.co.uk

@media only screen and (max-width: 749px) {
.site-nav__link–burger {
position: relative;
padding-left: 40px;
padding-right: 40px;
top: -2px;
&::before {
position: absolute;
content: “MENU”;
bottom: 0px;
left: 0px;
right: 0px;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
}
}
}

1 Like
2

@swe22344

sorry for that issue please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px) { {
.site-nav__link--burger[aria-expanded="false"]::before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .5px;
    content: "OPEN";
}
.site-nav__link--burger[aria-expanded="true"]::before {
    content: "Close";
}
}
2 Likes
3

One word. Legend. Thanks mate works a dream.