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

I would like to make one of my navigation menu items/titles to look like a button/be highlighted compared to the rest. I am using the om-template. It looks like the attached photo and I would like the DONATE to be in a darker font with a white rectangular background behind it. I would like it to look similarly to the other attached photo where the CONTACT looks like a button. Thank you!

6 minutes ago, northshore said:

I would like to make one of my navigation menu items/titles to look like a button/be highlighted compared to the rest. I am using the om-template. It looks like the attached photo and I would like the DONATE to be in a darker font with a white rectangular background behind it. I would like it to look similarly to the other attached photo where the CONTACT looks like a button. Thank you!

You should share link to your site. It needs some custom code.

Here is the link to the site: minidokafilm.com

Do you know what the custom code should be?

2 hours ago, northshore said:

Here is the link to the site: minidokafilm.com

Do you know what the custom code should be?

Add to Home > Design > Custom CSS

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

Thank you so much!

On 11/5/2019 at 6:11 PM, northshore said:

Thank you so much!

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;
}

 

Hi Tuanphan,

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

My website is www.rouas.fr

(MONTAUK template)

and i want to highlight the last navigation item ACCCES CLIENT

It would be great if you could help me !

Many thanks,

Davy

@DAVYR

replace .main-nav a[href="/donate"] with

.main-nav ul>li:last-child a

Perfect !

Many thanks tuanphan !

47 minutes ago, DAVYR said:

Perfect !

Many thanks tuanphan !

there has a like button on right... 😎

For your 7.1 sites, we have a freebie navigation highlight effect if you want to keep going with a more custom look. www.squareaddons.com

Hi @tuanphan

I am trying the same thing with my website www.shoshinmatcha.com

 I would like to highlight the Shop Now navigation menu item at the top of the page. I tried to alter you code but it didn't work... please help? :)

19 hours ago, shoshinmatcha said:

Hi @tuanphan

 

I am trying the same thing with my website www.shoshinmatcha.com

 I would like to highlight the Shop Now navigation menu item at the top of the page. I tried to alter you code but it didn't work... please help? :)

header.Header [href*="/select-your-matcha"] {
    background: red;
    color: white !important;
    padding-top: 5px !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
}

@tuanphan - Thanks so much! it worked. it looks cool thanks! there was just one question now that it works, it looks like now the shop now is slightly higher? the text "SHOP NOW" looks like a mm higher in the navigation? any help is appreciated 🙂

6 minutes ago, shoshinmatcha said:

@tuanphan - Thanks so much! it worked. it looks cool thanks! there was just one question now that it works, it looks like now the shop now is slightly higher? the text "SHOP NOW" looks like a mm higher in the navigation? any help is appreciated 🙂

try play with padding top or padding bottom in above code

yes perfect that worked! thanks so much

@tuanphan I believe this is what I need too - I just want to differentiate a menu item when the mouse if hovering over it.

The site I am working on isn't live yet, how can I show you?

Thanks!

12 hours ago, tuesdayroo said:

@tuanphan I believe this is what I need too - I just want to differentiate a menu item when the mouse if hovering over it.

The site I am working on isn't live yet, how can I show you?

Thanks!

You can setup password & share url. See how to in my singature.

Hey @tuanphan - here is the url - https://bagpipe-squid-gspa.squarespace.com/

password is hello2020

Thank you 🙂

I also have another 2 x sites that I need to know how to do this for, so would be great if you could show me in a way that I can replicate.

Thanks!

22 minutes ago, tuesdayroo said:

Hey @tuanphan - here is the url - https://bagpipe-squid-gspa.squarespace.com/

password is hello2020

Thank you 🙂

I also have another 2 x sites that I need to know how to do this for, so would be great if you could show me in a way that I can replicate.

Thanks!

Add to Home > Design > Custom CSS

.header-nav-list a[href="/gallery"]:hover {
    color: red !important;
}
.header-nav-list a[href="/contact"]:hover {
    color: green !important;
}
.header-nav-list a[href="/poetry"]:hover {
    color: black !important;
}

Repeat for other items

@tuanphan thank you but it's not working - it's only making the top menu item (poetry) disappear which i'm guessing is making that black.

The rest, nothing is happening with?

Thank you 🙂

9 minutes ago, tuesdayroo said:

@tuanphan thank you but it's not working - it's only making the top menu item (poetry) disappear which i'm guessing is making that black.

The rest, nothing is happening with?

Thank you 🙂

I see worked here? Above is example code for 3 items, you can repeat for other items.

@tuanphan ahhh i see - I need to change colours only for the dropdown menu items underneath 'Portfolio'

The top nav is fine like that, I just need to be able to differentiate the different Portfolio items when someone hovers over them.

I hope that makes sense?

Thanks 🙂

You can repeat code poetry for other items, replace with page url slug (in example, /poetry is poetry page url)

Ah ok great!! Thank you for your help 🙂

On 6/20/2020 at 4:28 AM, Becs said:

Hello @tuanphan, I need to highlight main-menu on hover and selection (when the page is selected it stays highlighted, so the user can see exactly where they are). I am wanting the light blue colour on the "Book a meeting" button.

My 7.1 site is:

triangle-badger-tshn.squarespace.com

 

Enter password:

Kendons1234

Hi. I see you solved?