Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Recommended Posts

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!

Screen Shot 2019-11-04 at 2.40.11 PM.png

Screen Shot 2019-11-04 at 2.42.26 PM.png

Link to comment
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!

Screen Shot 2019-11-04 at 2.40.11 PM.png

Screen Shot 2019-11-04 at 2.42.26 PM.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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

Link to comment
  • 5 months later...
  • 2 weeks later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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.

image.thumb.png.8f05eed7a61ec27f77be3255bb213d12.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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:

 
Enter password:
Kendons1234

Hi. I see you solved?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...