Image instead of text in the navigation bar

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

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 🙂

try this line

 background-size: cover;

to

 background-size: contain;

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 🙂

Add height: 90px; to your code

you will have

add this CSS code to align Portfolio - Services item

nav.header-nav-list {
    align-items: center;
}

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

On 6/10/2024 at 4:48 PM, hav_ery said:

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

With mobile, you can use this

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