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

Hi @tuanphan

I am struggling with the same issue. I've been trying to use the codes above but nothing changes. 🙂
My website is: www.julierommelaere.be and I would like to turn LET'S MEET in the navigation bar into a yellow highlight (#f4d34c) with white letters.

I'm using the MATSUYA template.

It would be great if you could help me out! Thank you in advance!

Julie

Link to comment
On 12/1/2020 at 11:57 PM, julierom said:

Hi @tuanphan

I am struggling with the same issue. I've been trying to use the codes above but nothing changes. 🙂
My website is: www.julierommelaere.be and I would like to turn LET'S MEET in the navigation bar into a yellow highlight (#f4d34c) with white letters.

I'm using the MATSUYA template.

It would be great if you could help me out! Thank you in advance!

Julie

Add to Home > Design > Custom CSS

header#header [href="/letsmeet"] {
    background: #f4d34c !important;
    color: white;
    padding: 5px;
    border-radius: 10px;
}

 

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

Hi @tuanphan,

Can I ask you another question? 🙃

I would like to highlight the subtitles in the dropdown menu of 'Portfolio' when hovering over it in the color #f3d333. You can see the dropdown menu in the screenshot below. 

I tried the codes below, based on your messages, but it's not working:

.header-nav-list a[href="/all"]:hover {
    color: #f3d333 !important;

and

header#header [href="/all"]:hover {
    background: #f3d333 !important;
    color: white;
    padding: 7px;
    border-radius: 2px;
}

Can you help me out with this one too? Thank you in advance!! 🙏

PS: As you can see the highlight on 'LET'S MEET' worked! 🙌

Julie1351488751_Schermafbeelding2020-12-03om17_50_11.thumb.png.8da2f758014563aea3651c19bc0aa131.png

Link to comment
16 hours ago, julierom said:

Hi @tuanphan,

Can I ask you another question? 🙃

I would like to highlight the subtitles in the dropdown menu of 'Portfolio' when hovering over it in the color #f3d333. You can see the dropdown menu in the screenshot below. 

I tried the codes below, based on your messages, but it's not working:

.header-nav-list a[href="/all"]:hover {
    color: #f3d333 !important;

and

header#header [href="/all"]:hover {
    background: #f3d333 !important;
    color: white;
    padding: 7px;
    border-radius: 2px;
}

Can you help me out with this one too? Thank you in advance!! 🙏

PS: As you can see the highlight on 'LET'S MEET' worked! 🙌

Julie1351488751_Schermafbeelding2020-12-03om17_50_11.thumb.png.8da2f758014563aea3651c19bc0aa131.png

Use this code

div.header-nav-folder-item [href*="/all"]:hover {
    color: red !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
  • 1 month later...
10 hours ago, sds said:

Hi! I would like to highlight "Free Giveaway" with red, and the text in white. I've tried the code here above but didn't seem to work. I'm using the Delvin template

Screenshot 2021-01-09 at 16.05.57.png

Can you share site url? 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

Link to comment
  • 2 weeks later...
On 1/19/2021 at 11:46 PM, PetterBulling said:

I have the same problem for my website petterbulling.com password: petter123

I want the selected menu item to be orange ( hsl(43, 98%, 58%) ) and the others white! 

Thanks in advance:)

Add to Design > Custom CSS

div.header-nav-item--active a {
    color: hsl(43, 98%, 58%) !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
22 hours ago, sds said:

https://studiodeschutter.com/free-giveaway Colour red hsl(0, 72%, 37%, a square box with white text is whished. 

Thanks in advance for your help.

Add to Design > Custom CSS

ul.nav a.active {
    color: hsl(0, 72%, 37%) !important;
    border: 1px solid white;
    padding: 5px;
}

 

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
  • 3 weeks later...
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;
}

 

Dear Tuanphan,

   I'm sorry to bring this post up again, but you seem to be of immense help. I am trying, like the first person here, to have a background square behind one of my menus. I tried (before posting this message) the different codes you gave, and didn't achieve it. I made sure i changed the name of the menu, but nothing. Would you care to help out ?

Site is here: https://cutt.ly/EkLIxEU

Pass is "hans".

I am trying to get a square behind the top right menu named "client login".

Thanks for helping out ! :-)

Cheers,

Link to comment
On 2/13/2021 at 4:53 AM, AlBundy said:

Dear Tuanphan,

   I'm sorry to bring this post up again, but you seem to be of immense help. I am trying, like the first person here, to have a background square behind one of my menus. I tried (before posting this message) the different codes you gave, and didn't achieve it. I made sure i changed the name of the menu, but nothing. Would you care to help out ?

Site is here: https://cutt.ly/EkLIxEU

Pass is "hans".

I am trying to get a square behind the top right menu named "client login".

Thanks for helping out ! :-)

Cheers,

Add to Design > Custom CSS

header#header [href="/login"] {
    background: violet;
    padding: 5px;
}
nav.header-nav-list {
    align-items: center;
}

 

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
On 11/5/2019 at 9: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 Can you help me with the Avenue theme? 

I can't find a code that works but I'd like the button around the Donate link to look like the contact link in the OP.

 

Website: http://yourejustmytype.com

Link to comment
On 2/19/2021 at 8:59 PM, LauraLeigh said:

 

Hi Can you help me with the Avenue theme? 

I can't find a code that works but I'd like the button around the Donate link to look like the contact link in the OP.

 

Website: http://yourejustmytype.com

Add to Design > Custom CSS

nav.main-nav>ul>li:nth-child(4) a {
    background: black;
    color: white !important;
}
nav.main-nav>ul>li a {
    padding: 20px !important;
}
header#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 

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, tuanphan said:

Add to Design > Custom CSS


nav.main-nav>ul>li:nth-child(4) a {
    background: black;
    color: white !important;
}
nav.main-nav>ul>li a {
    padding: 20px !important;
}
header#header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

 

Thank you so much!

Link to comment
  • 2 weeks later...
On 2/21/2021 at 7:05 PM, LauraLeigh said:

Thank you so much!

You haven't installed SSl yet, so the browser shows "Not Secure"

You can install SSL here (free). https://support.squarespace.com/hc/en-us/articles/205815898-Understanding-SSL-certificates

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
  • 4 months later...

Create an account or sign in to comment

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

×
×
  • Create New...