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 post
  • Replies 42
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Add to Home > Design > Custom CSS .main-nav a[href="/donate"] { background: darkgray; padding: 5px 10px !important; border: none !important; color: white; }  

there has a like button on right... 😎

header.Header [href*="/select-your-matcha"] { background: red; color: white !important; padding-top: 5px !important; padding-left: 5px !important; padding-right: 5px !important; }

Posted Images

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;
}

 

Link to post

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

 

Link to post
  • 1 month later...

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

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

Link to post
  • 2 weeks later...

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

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

 

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

 

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

 

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

 

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

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