Need to change menu heading color

[Cara_Circuit]

Hello,

I can easily change the color of the text in my menu list, but I can’t figure out how to change the color of the menu headings. Symmetry theme and the site is circuitbmx.com

[suyash1]

@Cara_Circuit please add this css to the very end of your main.css file and check

a.navigation__link.navigation__column-title {color: #ff0011;}

a.navigation__link.navigation__column-title:hover{color: #ff0011;}

[Guleria]

Hello @Cara_Circuit ,

Follow these steps:

1. Go to Online Store → Theme → Edit code

2. Open your main.css file and paste the following code at the bottom:

a.navigation__link.navigation__column-title {
    color: #ff0000;
}

You can change color code a/to your need.

If problem solved don’t forget to Like it and Mark it as Solution!

Thanks

[Cara_Circuit]

Thank you for the fast reply! I’ve never edited code before. It was easy! Can you also tell me how to make it slightly larger? The list is larger than the headings

[Guleria]

To increase the font size use this css just next to the previous css

.navigation__item  a.navigation__link.navigation__column-title {
    font-size: 1rem !important;
}

If problem solved don’t forget to Like it and Mark it as Solution!

Thanks

[Cara_Circuit]

Thanks. When I put the code into my copy of the store it worked, but not on my live store. Perhaps an app is getting in the way?

[Guleria]

Can you apply the css in the live theme so i can check ?

[Guleria]

Please replace both previously provided css with this one

.navigation__item a.navigation__link.navigation__column-title {
    font-size: 1rem!important;
    color: #000 !important;
}

If problem solved don’t forget to Like it and Mark it as Solution!

[Cara_Circuit]

Sorry it’s taken me so long to reply to this! None of these code changes work. Is it possible an app is interfering? I’m afraid to make the changes on my published theme. Is there any way of finding out what’s going on? I’m also trying to make 6 columns in the mega menu instead of 5, and I followed the code changes from another user’s posted question and those changes didn’t do anything either. WOuld love some help if possible.

[Guleria]

Hello @Cara_Circuit ,

You can drop an email to discuss further.

[Cara_Circuit]

Hi,

Thanks so much for your offer to help me with my mega menu issues! Overall,
the menu is just too big and takes up the whole screen every time a
cursor touches it, intentionally or not. It’s only an issue for viewing on
a desktop, the phone hamburger menu is fine. The issue is that no matter
what code I alter in the theme editor custom css section, or the main.css
file, nothing really changes. I also had this experience with the “Quick
Buy” buttons not showing, and the collection titles not showing, until I
just updated the theme. My guess is that there is an app interfering? I
thought it might be Rapid Search but they claim it’s not. Can you help me
figure it out?

These are the menu changes I’d like to make. I’ll attach a file showing my
current code for main.css, which you’ll see I’ve messed up with padding
being reduced on only the left side.

I’d like to have 6 columns in each row. This can be achieved by reducing
the padding around the columns, or reducing the gap between the columns, or
both, whichever you think is best.

Also, I’d like to have the category text the same size and color as the
sub-category text. No matter what I do to change it, it always stays dark
grey.

I could also reduce the leading in the columns to make the menu smaller? I
just want to make sure it’s still clear to read.

Regardless of what is done to make more columns, I still feel like we
could reduce outer padding to make the entire menu smaller.

Lastly, I’d like to ensure “Frames” appears styled like the other category
headings. It doesn’t have any sub-categories so for some reason that makes
it behave differently.

my site is circuitbmx.com, and a collaborator code, if needed, is 4486

my email address is caraburgess@gmail.com. Thanks again for your help!