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

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

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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

Share this post


Link to post

@DAVYR

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

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
47 minutes ago, DAVYR said:

Perfect !

Many thanks tuanphan !

there has a like button on right... 😎


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

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? :)

Share this post


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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

@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 🙂

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

@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!

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

@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 🙂

Share this post


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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

@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 🙂

Share this post


Link to post

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...