Hello, I’m looking for some one to help me change the colour of the Easter Specials on my website www.makoye.co.za to Red through CSS, Thanks using the Avenue theme by Red Plug Design Co.
Topic summary
Goal: highlight the single “Easter Specials” menu link in the Avenue (Shopify) theme with a distinct red color via CSS (Cascading Style Sheets).
Solutions proposed:
- Add a CSS rule in styles.css (or assets/style.css) targeting the last menu item: “.responsiveMenu li.last a span { color: red !important; }”.
- Alternate selector: “.header-navigation nav .responsiveMenu > li:last-child > a { color: red !important; }”.
- Implementation steps: Online Store → Theme → Edit code → open stylesheet → append the rule. One reply suggested adding CSS in theme.liquid before , but no specific code was provided.
Outcome: The color-change solution worked; the requester confirmed it helped.
Latest update: The requester asked if the menu can be styled to match a Photoshop mockup shown in an attachment (further visual changes beyond color). No detailed guidance for this enhanced styling has been provided yet.
Notes:
- CSS = the code used to style site elements; theme.liquid = the main layout file; styles.css/style.css = the site’s stylesheet.
- Images/screenshots are central for understanding the current menu look and the desired end result.
Status: Partially resolved; follow-up design request remains open.
Hi @MrO1 ,
This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1. Go to Online Store → Theme → Edit code
Step 2. Open your theme.liquid theme file
Step 3. Paste below code before :
Note: You can change color to fit your store
Hope my answer will help you.
Best regards,
Victor | PageFly
1 Like
Hi @MrO1
step 01:
- Go to your Store > Theme > click to edit code.
- find this file “styles.css” and open.
step 02:
- Paste the code at the of the file.
.responsiveMenu li.last a span {
color: red !important;
}
I Hope this can help you and solve you get issue
Thank you!
1 Like
Hello @MrO1
I would like to give you a solution to support you.
-
Go to Online Store → Theme → Edit code.
-
Open your assets/style.css theme file.
-
Add the code at the end of the file:
.header-navigation nav .responsiveMenu > li:last-child > a{
color: red !important
}
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
1 Like
