Solved

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

swe22344
Visitor
3 0 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;
}
}
}

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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";
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 2 (2)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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";
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
swe22344
Visitor
3 0 1

One word. Legend. Thanks mate works a dream.