hav_ery Posted June 4 Share Posted June 4 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 Link to comment
Beyondspace Posted June 4 Share Posted June 4 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. /!\ 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 hav_ery and tuanphan 2 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight 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
hav_ery Posted June 5 Author Share Posted June 5 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 🙂 Link to comment
tuanphan Posted June 6 Share Posted June 6 try this line background-size: cover; to background-size: contain; hav_ery 1 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
hav_ery Posted June 6 Author Share Posted June 6 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 🙂 Link to comment
tuanphan Posted June 8 Share Posted June 8 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; } hav_ery 1 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
hav_ery Posted June 10 Author Share Posted June 10 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
tuanphan Posted June 12 Share Posted June 12 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; } hav_ery 1 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 hav_ery Posted June 12 Author Solution Share Posted June 12 (edited) 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 June 12 by hav_ery Add the mention of @tuanphan to thank him tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment