Jump to content

Image instead of text in the navigation bar

Go to solution Solved by hav_ery,

Recommended Posts

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.  /!\

Capturedecran2024-06-04a13_33_28.thumb.png.ab509d3e4f2df42e4ef0afb8e0185100.png

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

Link to comment
3 hours ago, hav_ery said:

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.  /!\

Capturedecran2024-06-04a13_33_28.thumb.png.ab509d3e4f2df42e4ef0afb8e0185100.png

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

You can try the following Css code to set the image for navigator

body:not(.header--menu-open) .header .header-nav-wrapper .header-nav-item> a[href*="/portfolio"] {
  background-image: url(https://images.unsplash.com/photo-1717445122373-7127aca71aee?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D); // change to your image link here
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: transparent;
}

Let me know how it works on your site

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

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

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

image.png.ce1de49cff926840af5e9bbf82a178b0.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

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

 

Edited by hav_ery
Add the mention of @tuanphan to thank him
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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.