How can I change the hover color and current menu tab color in the Brooklyn theme?

Technical Q&A
1

Howdy!

I’d like my visitors to 1) know which page they are currently on and 2) which one they would be selecting when they move their cursor across the menu buttons. Does anyone know how to change the hover color & current menu tab color for the Brooklyn Theme?

Hover color change:

I was able to find a website that uses the Brooklyn theme which changes the hover color but the current page color is the same. It is at: https://geniuspipe.com

Hover color change & current page different color:

This example solves both of my problems but is not a Shopify theme and is a WordPress theme: https://themegrilldemos.com/spacious-demos/#//preview/spacious-free

Thanks,

David

2

@David_Alexander

yes i can see its work if still please share screenshot

3

It does not work on my website. I just installed Brooklyn theme and want to change 1) Hover Color and 2) Current Page Color similar to the theme in: https://themegrilldemos.com/spacious-demos/#//preview/spacious-free

4

#1.jpg
#1.jpg1920×874 119 KB

#2.jpg
#2.jpg1920×888 121 KB

5

Hi @David_Alexander

Please add the below style to your base.css file. Please change the red color as per your need.

span.header__active-menu-item {
    color: red;
}
.header__menu-item:hover {
    color: red;
}
6

Hi Sagar,

How can I send you some money? I insist.

Brooklyn theme does not have Base.CSS file ?

On a seperate note, I tried to save something else to Theme.SCSS and Shopify wont let me and gives me an error message which can be seen in the attached photo.

Screen Shot 2022-07-08 at 10.47.51 PM.png
Screen Shot 2022-07-08 at 10.47.51 PM.png1401×748 110 KB

7

Hi @David_Alexander
Sent you private message

8

It worked!

You are great at your job.

Thank you

9

Add below style to timber.scc.liquid

li.site-nav__item.site-nav--active>a {
    color: red !important;
}
li.site-nav__item:hover>a {
    color: red !important;
}