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

Change the Color of a Secondary Navigation Button (Brine)


jlama

Question

17 answers to this question

Recommended Posts

  • 0

Can you share link to your site?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Difficult to help without checking site url.

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

I managed to change it to outline but now the hover effect aint working. hELP

Here is the CSS code I used:

//NAVIGATION BUTTON COLOR CHANGE
.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}

Link to comment
  • 0
19 hours ago, jlama said:

I managed to change it to outline but now the hover effect aint working. hELP

Here is the CSS code I used:

//NAVIGATION BUTTON COLOR CHANGE
.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}

remove !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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
5 minutes ago, jlama said:

Looks better on the homepage but now when I go to other pages , my second button shows orange text when it should be white. 

Screen Shot 2020-05-20 at 6.58.48 AM.png

try this code to create both hover effect

.Header-nav-item[href="/lets-eat"] {
    background: transparent !important;
    border: 2px solid #B98847 !important;
  color: #00000 !important;
}
.Header-nav-item[href="/lets-eat"]:hover {
    background: red !important;
    border: 2px solid red !important;
  color: green !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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 5/20/2020 at 9:44 PM, jlama said:

So much better! Now I have to change the default button text color to white see if it gets better on the other pages.

Have you solved yet?

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Hi @tuanphan,

I could use your help with fine tuning this.

I was able to css two different style buttons in the secondary nav. However this works only on image overlay, but not on pages without a banner. I'd like to css the first button to only have a (blue) 2px border.

Right now, the first button is not visible (only on hover).

Compare homepage vs. contact page

1047677700_ScreenShot2020-12-04at11_49_04AM.thumb.png.1266b8c56696e063a2444226a3758953.png

860212053_ScreenShot2020-12-04at11_48_50AM.thumb.png.27a8f19e21fdc0004736e91673e8dd6d.png

Site: https://grape-dove-n6ym.squarespace.com/
PW: piper

 

Thanks a lot for taking a look!

 

Link to comment
  • 0
On 12/5/2020 at 4:52 AM, MariaFY said:

Hi @tuanphan,

I could use your help with fine tuning this.

I was able to css two different style buttons in the secondary nav. However this works only on image overlay, but not on pages without a banner. I'd like to css the first button to only have a (blue) 2px border.

Right now, the first button is not visible (only on hover).

Compare homepage vs. contact page

1047677700_ScreenShot2020-12-04at11_49_04AM.thumb.png.1266b8c56696e063a2444226a3758953.png

860212053_ScreenShot2020-12-04at11_48_50AM.thumb.png.27a8f19e21fdc0004736e91673e8dd6d.png

Site: https://grape-dove-n6ym.squarespace.com/
PW: piper

 

Thanks a lot for taking a look!

 

Add this CSS

body:not(.homepage) .Header-nav--secondary a.Header-nav-item[href="/referrals"] {
    border: 2px solid black !important;
    color: black !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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Thank you @tuanphan The code works if only the homepage had a banner, but other pages with a banner don't end up having the same buttons as the ones on the homepage.

How can I define different button styles for pages with a banner (e.g. 'Our Team'), and pages without (i.e. 'Contact'? 

Not sure if this is a bigger challenge, or has an easy solution. 

Thanks again for your support, it's appreciated!

Link to comment
  • 0
On 12/10/2020 at 10:53 AM, MariaFY said:

Thank you @tuanphan The code works if only the homepage had a banner, but other pages with a banner don't end up having the same buttons as the ones on the homepage.

How can I define different button styles for pages with a banner (e.g. 'Our Team'), and pages without (i.e. 'Contact'? 

Not sure if this is a bigger challenge, or has an easy solution. 

Thanks again for your support, it's appreciated!

Add to Page Header. Disable Ajax Loading if the code doesn't work.

<style>
  .Header-nav--secondary a.Header-nav-item[href="/referrals"] {
    border: 2px solid green !important;
    color: violet !important;
}
</style>

 

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 4/16/2021 at 7:49 PM, philipanthonymangan said:

@tuanphan you seem to be pretty knowledgeable and would love it if you could please help me out with something.  I'm trying to figure out how to change the button color of "Meet Your Coach" Button that I've added to the banner image area.  Any insight would be greatly appreciated, thank you!

 

2134791200_ScreenShot2021-04-16at8_46_56AM.thumb.png.ffdeb15dddb6859296595910c13fc81a.png

Can you share link to your site? We can help easier

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 - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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...