x

Change background colour of the second navigation button only

Hi 
 
Can someone explain how I can change the background colour of the second navigation button only? I am happy with the navigation bar as it is but I would like the second button's background to be white letters over black rather than the current transparent option?
 
It would be helpful if you could point me to the relevant section of the CSS code. 
 
My website is here: http://consultapediatrica.weebly.com/
 
I am using the theme called Urban Dine and I only want to change the "Clinic Times" button.

Many thanks
 
EasyM84

2,563 Views
Message 1 of 13
Report
1 Best Answer
Square

Best Answer

Ohh, ok, I see what you mean. Add this to Settings > SEO > Header Code:

<style>
#pg757640833140525880 > a
{
	background: #fff !important;
	color: #000 !important;
	border: 1px solid #000 !important;	
}
#pg757640833140525880 > a:hover
{
	opacity: 0.8 !important;
}
</style>

It won't change it in the editor but it will on the live site.

View Best Answer >

2,515 Views
Message 14 of 13
Report
12 REPLIES 12
Square

To edit the CSS, click the THEME tab and then you'll see a button titled Edit HTML / CSS on the bottom left.  I'm not able to assist directly with custom coding, but our Community has many savvy members who may be able to offer assistance!

2,553 Views
Message 14 of 13
Report

Thank you. Yes, I know how to get to the CSS editor but I need more specific guidance. Thanks 

2,533 Views
Message 14 of 13
Report
Square

By "second button" do you mean what it looks like when you hover over it with your mouse?

2,530 Views
Message 14 of 13
Report

Hi

Apologies. I mean the second button in the top menu bar entitled “Horarios de Atencion” or any button in that bar for that matter.

i just want one of them to be emphasised/highlighted over the others.

Do you happen to know how to amend the CSS in that way?

2,518 Views
Message 14 of 13
Report
Square

Best Answer

Ohh, ok, I see what you mean. Add this to Settings > SEO > Header Code:

<style>
#pg757640833140525880 > a
{
	background: #fff !important;
	color: #000 !important;
	border: 1px solid #000 !important;	
}
#pg757640833140525880 > a:hover
{
	opacity: 0.8 !important;
}
</style>

It won't change it in the editor but it will on the live site.

2,516 Views
Message 14 of 13
Report

Thanks Adam. I will give this a try! Many thanks!

2,510 Views
Message 14 of 13
Report
Square

Not a problem!

2,492 Views
Message 14 of 13
Report

Thanks Adam! That worked! 

Can I ask how did you find the #pgXXXXXXXXXXX reference for that button?

Thank you again for your help and for sharing your knowledge!

Tags (1)
2,484 Views
Message 14 of 13
Report
Square

I used the Inspector tool that comes with both Safari and Chrome to look at the source code of your site, then just found the ID of the list item that has that link in it. Smiley Happy

2,481 Views
Message 14 of 13
Report

You are a genius. Thanks mate!

1,163 Views
Message 14 of 13
Report

Thank you mate. That was all very helpful!

1,153 Views
Message 14 of 13
Report
Square

Glad it worked out for you!

1,150 Views
Message 14 of 13
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.