Change color/highlight one of the top navigation pages in Om template

Hi @tuanphan

I am struggling with the same issue. I've been trying to use the codes above but nothing changes. 🙂
My website is: www.julierommelaere.be and I would like to turn LET'S MEET in the navigation bar into a yellow highlight (#f4d34c) with white letters.

I'm using the MATSUYA template.

It would be great if you could help me out! Thank you in advance!

Julie

On 12/1/2020 at 11:57 PM, julierom said:

Hi @tuanphan

I am struggling with the same issue. I've been trying to use the codes above but nothing changes. 🙂
My website is: www.julierommelaere.be and I would like to turn LET'S MEET in the navigation bar into a yellow highlight (#f4d34c) with white letters.

I'm using the MATSUYA template.

It would be great if you could help me out! Thank you in advance!

Julie

Add to Home > Design > Custom CSS

header#header [href="/letsmeet"] {
    background: #f4d34c !important;
    color: white;
    padding: 5px;
    border-radius: 10px;
}

Thank you so much, @tuanphan!! Your help is much appreciated!

It worked!! 😄 🙏

Hi @tuanphan,

Can I ask you another question? 🙃

I would like to highlight the subtitles in the dropdown menu of 'Portfolio' when hovering over it in the color #f3d333. You can see the dropdown menu in the screenshot below. 

I tried the codes below, based on your messages, but it's not working:

.header-nav-list a[href="/all"]:hover {
    color: #f3d333 !important;

and

header#header [href="/all"]:hover {
    background: #f3d333 !important;
    color: white;
    padding: 7px;
    border-radius: 2px;
}

Can you help me out with this one too? Thank you in advance!! 🙏

PS: As you can see the highlight on 'LET'S MEET' worked! 🙌

Julie

16 hours ago, julierom said:

Hi @tuanphan,

Can I ask you another question? 🙃

I would like to highlight the subtitles in the dropdown menu of 'Portfolio' when hovering over it in the color #f3d333. You can see the dropdown menu in the screenshot below. 

I tried the codes below, based on your messages, but it's not working:

.header-nav-list a[href="/all"]:hover {
    color: #f3d333 !important;

and

header#header [href="/all"]:hover {
    background: #f3d333 !important;
    color: white;
    padding: 7px;
    border-radius: 2px;
}

Can you help me out with this one too? Thank you in advance!! 🙏

PS: As you can see the highlight on 'LET'S MEET' worked! 🙌

Julie

Use this code

div.header-nav-folder-item [href*="/all"]:hover {
    color: red !important;
}

Thanks, @tuanphan!! It worked! 🙏🙏

Hi! I would like to highlight "Free Giveaway" with red, and the text in white. I've tried the code here above but didn't seem to work. I'm using the Delvin template

10 hours ago, sds said:

Hi! I would like to highlight "Free Giveaway" with red, and the text in white. I've tried the code here above but didn't seem to work. I'm using the Delvin template

Can you share site url? We can help easier

I have the same problem for my website petterbulling.com password: petter123

I want the selected menu item to be orange ( hsl(43, 98%, 58%) ) and the others white! 

Thanks in advance:)

On 1/10/2021 at 2:56 AM, tuanphan said:

Can you share site url? We can help easier

https://studiodeschutter.com/free-giveaway Colour red hsl(0, 72%, 37%, a square box with white text is whished. 

Thanks in advance for your help.

On 1/19/2021 at 11:46 PM, PetterBulling said:

I have the same problem for my website petterbulling.com password: petter123

I want the selected menu item to be orange ( hsl(43, 98%, 58%) ) and the others white! 

Thanks in advance:)

Add to Design > Custom CSS

div.header-nav-item--active a {
    color: hsl(43, 98%, 58%) !important;
}

22 hours ago, sds said:

https://studiodeschutter.com/free-giveaway Colour red hsl(0, 72%, 37%, a square box with white text is whished. 

Thanks in advance for your help.

Add to Design > Custom CSS

ul.nav a.active {
    color: hsl(0, 72%, 37%) !important;
    border: 1px solid white;
    padding: 5px;
}

On 11/5/2019 at 3:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

.main-nav a[href="/donate"] {
    background: darkgray;
    padding: 5px 10px !important;
    border: none !important;
    color: white;
}

 

Dear Tuanphan,

   I'm sorry to bring this post up again, but you seem to be of immense help. I am trying, like the first person here, to have a background square behind one of my menus. I tried (before posting this message) the different codes you gave, and didn't achieve it. I made sure i changed the name of the menu, but nothing. Would you care to help out ?

Site is here: https://cutt.ly/EkLIxEU

Pass is "hans".

I am trying to get a square behind the top right menu named "client login".

Thanks for helping out ! :-)

Cheers,

On 2/13/2021 at 4:53 AM, AlBundy said:

Dear Tuanphan,

   I'm sorry to bring this post up again, but you seem to be of immense help. I am trying, like the first person here, to have a background square behind one of my menus. I tried (before posting this message) the different codes you gave, and didn't achieve it. I made sure i changed the name of the menu, but nothing. Would you care to help out ?

Site is here: https://cutt.ly/EkLIxEU

Pass is "hans".

I am trying to get a square behind the top right menu named "client login".

Thanks for helping out ! :-)

Cheers,

Add to Design > Custom CSS

header#header [href="/login"] {
    background: violet;
    padding: 5px;
}
nav.header-nav-list {
    align-items: center;
}

On 11/5/2019 at 9:12 AM, tuanphan said:

Add to Home > Design > Custom CSS

.main-nav a[href="/donate"] {
    background: darkgray;
    padding: 5px 10px !important;
    border: none !important;
    color: white;
}

 

Hi Can you help me with the Avenue theme? 

I can't find a code that works but I'd like the button around the Donate link to look like the contact link in the OP.

Website: http://yourejustmytype.com

On 2/19/2021 at 8:59 PM, LauraLeigh said:

 

Hi Can you help me with the Avenue theme? 

I can't find a code that works but I'd like the button around the Donate link to look like the contact link in the OP.

 

Website: http://yourejustmytype.com

Add to Design > Custom CSS

nav.main-nav>ul>li:nth-child(4) a {
    background: black;
    color: white !important;
}
nav.main-nav>ul>li a {
    padding: 20px !important;
}
header#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

2 hours ago, tuanphan said:

Add to Design > Custom CSS

nav.main-nav>ul>li:nth-child(4) a {
    background: black;
    color: white !important;
}
nav.main-nav>ul>li a {
    padding: 20px !important;
}
header#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 

Thank you so much!

On 2/21/2021 at 7:05 PM, LauraLeigh said:

Thank you so much!

You haven't installed SSl yet, so the browser shows "Not Secure"

You can install SSL here (free). https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates

Hi Tuanphan. I have the same challenge and hoping you can assist. In https://www.patientrightsadvocate.org/, I'd like to highlight TAKE ACTION and make it bold in red. Can you assist? Thank you in advance as you seemed to be super helpful.

4 minutes ago, EllePRA said:

Hi Tuanphan. I have the same challenge and hoping you can assist. In https://www.patientrightsadvocate.org/, I'd like to highlight TAKE ACTION and make it bold in red. Can you assist? Thank you in advance as you seemed to be super helpful.

Please disregard. One of the solutions worked! Thanks!

I would so love your help to my site is www.tehahi.org.nz i Would like to make the DONATE be a red button with white text. thanks so much 

On 2/22/2022 at 7:18 AM, FeeFeeDee said:

I would so love your help to my site is www.tehahi.org.nz i Would like to make the DONATE be a red button with white text. thanks so much 

Add to Design > Custom CSS

a.Header-nav-item[href="/donate"] {
    background-color: red;
    padding-left: 10px !important;
    padding-right: 10px !important;
}

Hi,

I am looking for this highlight too and I tried to use your code but it doesn't work.

My website is https://esteestein.com/

and I want to highlight the last navigation item GET FREE INSTAGRAM BIO TEMPLATES

It would be great if you could help me!

Many thanks,

Saman

On 5/22/2023 at 3:11 PM, code07 said:

Hi,

I am looking for this highlight too and I tried to use your code but it doesn't work.

My website is https://esteestein.com/

and I want to highlight the last navigation item GET FREE INSTAGRAM BIO TEMPLATES

It would be great if you could help me!

Many thanks,

Saman

Add to Design > Custom CSS

header#header [href="/get-free-instagram-bio-templates"] {
    background-color: black;
    color: white;
    padding-left: 10px;
    padding-right: 10px;
}

Hi, I am trying to get the highlight background effect on my main navigation when hovering over, to look like this this.

I tried some of the code in this thread but can't seem to get it working, can you help? 

https://proctimise.squarespace.com/

pw: lucy