Jump to content

Replace tekst in header for clickable image

Recommended Posts

Good day,

My colleague recently left and we want to make changes to our website.

We want to replace the text in the header STANLEY/STELLA (which is linked to the primary navigation) with the Stanley/Stella logo.

Is this possible? I've watched a lot of youtube and searched here on the forum but can't quite figure it out.

Hope to hear from someone!

example.jpg

Link to comment
  • Replies 5
  • Views 254
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 5/3/2023 at 5:39 PM, jasperevers said:

@tuanphan

 

Hi,

The sit URL is https://www.inpromo.nl/.

Thank you in advance!

Add to Design > Custom CSS. Replace Pixabay with your image url.

This code runs on desktop only, if you need it on mobile, let me know, we can give code

a.Header-nav-item[href="/stanleystella"] {
    background-image: url(https://cdn.pixabay.com/photo/2023/04/23/11/11/flowers-7945521_1280.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

 

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

@tuanphan I have a weird situation where I've successfully replaced the text with an image using code (included below), but when I'm on any of the 3 pages nested under the nav folder, the image disappears.

Site is stowestorylabs.org.

You'll see the image swap disappear if you go to stowestorylabs.org/vermont-film-music-festival

 

Custom CSS Code:

// VFMF NAV IMAGE SWAP//
.header-announcement-bar-wrapper [href="/vfmf"] {
    background-image: url(https://static1.squarespace.com/static/631a415a2c65ac4dfab054b7/t/63e5592b64390d7f4c4cffe7/1675974956133/VFMF+word+logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    color: transparent !important;
}

Screen Shot 2023-05-09 at 4.15.01 PM.png

Screen Shot 2023-05-09 at 4.15.13 PM.png

Link to comment

Use this code

.header-announcement-bar-wrapper [href="/vfmf"] {
    background-image: url(https://static1.squarespace.com/static/631a415a2c65ac4dfab054b7/t/63e5592b64390d7f4c4cffe7/1675974956133/VFMF+word+logo.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    color: transparent !important
}

 

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

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.