hav_ery

Thank you A LOT @tuanphan

That worked perfectly! You're amazing 😄

I'll just add the two codes back to back to mark this as the solution :

// PORTFOLIO IMG NAV //

body:not(.header--menu-open) .header .header-nav-wrapper .header-nav-item> a[href*="/portfolio"] {
  background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng); // change to your image link here
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  height: 40px!important
}
nav.header-nav-list {
    align-items: center;
}

// PORTFOLIO IMG MOBILE //


div.container.header-menu-nav-item [href="/portfolio"] {
    background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng);
  background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    color: transparent !important;
    height: 40px!important;
}

Hello @tuanphan

First of all, thank you for taking your time to fix this issue !

Here's the code I used (i didn't want the bar to be that big) 

// PORTFOLIO IMG NAV //

body:not(.header--menu-open) .header .header-nav-wrapper .header-nav-item> a[href*="/portfolio"] {
  background-image: url(https://images.squarespace-cdn.com/content/61c1cab0cf9b832f2ffc6ae7/0ec7276c-0e6e-409d-945d-b90e5271be5b/PORTFOLIO+homebar.png?content-type=image%2Fpng); // change to your image link here
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  height: 40px!important
}
nav.header-nav-list {
    align-items: center;
}

Just another detail (i hope), to add the "sticker" to my mobile hamburger view what should i do?

PS: if this is taking too much time, i would be more than happy to send you a PayPal !
Thank you (again) 🙂

Thank you @tuanphan !

It worked :


Can i just tweak the size of the image? Just to make it pop?

And if i wanted to add it to my mobile section view: 



Thank you again 🙂

Hello @Beyondspace

First, thank you for answering !

I put your code in my Personalized CSS and here's the result:



The img looks like this :


(This is a screenshot, the real one is a PNG) 

Thank you so much 🙂

Hello everyone and fellow Squarespace Circle members, 

I'm currently trying to put an image instead of a text in my navigation bar.
My goal would be to change the Portfolio Text by an image similar to the "sticker" you can see in my homepage.
I just can't handle the CSS…

/!\.  I'm using the // Floating Header - Ghost // from Ghostplugins.com.  /!\



My website :
havery.studio

Thank you so much !

BONUS POINT : If you have any idea on how to put a custom language icon and hiding the text *that's not even aligned*, I'd be more than happy. Thank you AGAIN

Once again, the Squarespace Wizard @Ziggy did it.
Thank you so much 🙂 

Hello @Ziggy !

If needed i can send a PayPal !

Does anyone have any idea on how to achieve this, please? 🥺

Thank you 🙂 

Sadly, it didn't work… 

It didn't change a thing !
but thank you anyway 🙂

Hello @Ziggy ! 

Do you know if it's possible? 

Thank you 🙂

Yes sure ! Sorry

https://havery.studio

Hello everyone, 

I have an issue with a Carousel Block on my website, 

Desktop Mode looks fine :

But I expected the Mobile Version to be wider .
I wanted the "card' to take all of my screen height…

Can i accomplish that with CSS? 

Thank you ! 🙂 

The WebMagician nailed it, once again!

Thank you @Ziggy ! 😄 

Quick question : 

It also greyed out my instagram posts (a little below), can i revert this ? @Ziggy :') 

Thank you so much dear !  It worked !  🤩

Have a nice day ! 😄

Hello everyone, 

I'm desperately trying to make my homepage's gallery grid react to hover with grayscale 
https://havery.studio/ It's a simple Gallery Block 

I'm trying to replicate what i did it for my portfolio page : https://havery.studio/portfolio

I used this code for the Portfolio Hover Gray.

I don't have a clue how to do it for my homepage, thank you ! 🙂

//IMAGE HOVER//

.grid-item .grid-image{filter:grayscale(1)}

.grid-item:hover .grid-image{filter:grayscale(0)}