Highlight for a specific mega menu button on Flex theme

Store Design
, , , ,
1

hi forum

I want to highlight a specific collection “Pre-Order” on my website, https://shop.ducatisydney.com.au/

The site was built on Flex theme.

I have read many similar posts and they are all pointed to base or asset.css which is not seen in my theme.

Could anyone advise how to make any of the below changes?

  1. change button background colour
  2. change button text colour
  3. change button text to BOLD

Much appreciated.

2

Hi,

Go to your online store → Edit code then find theme.liquid file and paste this code in the end of theme.iquid file
3

Hey @haoli1 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

You can change the ‘color: black’ to hex color #000 or any other,

You can change the ‘background-color: red’ to hex color #000 or any other,

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1710731707366.png
ThePrimeWeb_0-1710731707366.png2166×1606 271 KB

4

Hi @haoli1

  • Go to Online Store → Theme → Edit code.
  • Find the file assets/style.css and paste the code below at the bottom of the file."
a[href="/collections/pre-order"] span {
color: red;
font-weight: bold;
}

devcoders_0-1710731576079.png
devcoders_0-1710731576079.png1356×296 109 KB

5

thank you @Asad-Mahmood for your prompt solution. it worked.

6

thank you @ThePrimeWeb .

7

thank you @devcoders

8

@Asad-Mahmood thanks again. is it possible to make the same change on the mobile view?

9

@haoli1 Yes, to apply same changes in mobile view you can add this code before closing script tag 

const mobileAnchorElement = document.querySelector('a.mobile-menu__item[href="/collections/pre-order"]');

mobileAnchorElement.style.backgroundColor = '#FF5733'; // Change background color
mobileAnchorElement.style.color = '#FFFFFF'; // Change text color
mobileAnchorElement.style.fontWeight = 'bold'; // Make text bold
10

You’re welcome! I’m glad to hear it worked perfectly for you. If you need any further assistance, feel free to ask!

please consider liking and accepting the solution.

11

Work like a charm! great solution @Asad-Mahmood

12

Thanks feel free to reach out if you need any further help