Jump to content

7.1 Navigation with images to replace text

Recommended Posts

Site URL: https://clover-carnation-c267.squarespace.com/

Hi, I'm trying to use custom images instead of the navigation text. I used information from another thread and it worked but when the link it clicked, the image disappears. Any ideas on how to fix this? It did work fine on 7.0 but I'm now moving the site to 7.1 it's not working.

It's also not showing up on mobile.

Site is https://clover-carnation-c267.squarespace.com/

Password: India76!

@tuanphan helped the original poster. Hoping you are able to help me too.

 

Link to comment
3 hours ago, IsaWP said:

Site URL: https://clover-carnation-c267.squarespace.com/

Hi, I'm trying to use custom images instead of the navigation text. I used information from another thread and it worked but when the link it clicked, the image disappears. Any ideas on how to fix this? It did work fine on 7.0 but I'm now moving the site to 7.1 it's not working.

It's also not showing up on mobile.

Site is https://clover-carnation-c267.squarespace.com/

Password: India76!

@tuanphan helped the original poster. Hoping you are able to help me too.

 

Regarding the hidden image navigators when they are active, you can try adding to your Css code the !important, so it could help to prevent overwriting of the default setting

image.thumb.png.111463a547dc3dfe940813a2ef556479.png

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
1 hour ago, bangank36 said:

Regarding the hidden image navigators when they are active, you can try adding to your Css code the !important, so it could help to prevent overwriting of the default setting

image.thumb.png.111463a547dc3dfe940813a2ef556479.png

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you this worked with getting the image to still be visible when they are active.

It's still not showing for the mobile navigation though.

Link to comment

Hi @IsaWP,

On mobile, it seems that we have the burger menu

image.png.6e3782726b6bd34a3a589498f02a47c9.png

And i've checked that it is still fine when active any page. Do I misunderstand any point?

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
2 hours ago, IsaWP said:

Hi, I'm looking for the hand-drawn images to be shown on mobile navigation as well.

On 7.0 I did this by adding :

.Mobile-overlay-nav-item[href="/work"] 

for example but I can't find how to target the mobile navigation in 7.1

To target nav on mobile, you can try the following one

.header-menu--folder-list .header-menu-nav-item [href="/work"]  {
  color: red !important;
  /*Your style*/
}

Add all the href you want to style more

Hope it can help you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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

Hi again,

I've just realised that if the navigation has an external link then it won't pick up the link styles. Do you have any idea how I could use the image for a link away from the squarespace site?

For example instead of using /blog in the code the BLOG nav item would go to www.blog.com but still show the handwritten image like the other nav items?

Thank you

Link to comment
13 minutes ago, IsaWP said:

Hi again,

I've just realised that if the navigation has an external link then it won't pick up the link styles. Do you have any idea how I could use the image for a link away from the squarespace site?

For example instead of using /blog in the code the BLOG nav item would go to www.blog.com but still show the handwritten image like the other nav items?

Thank you

I think you should copy the previous code into new one and replace it with your new href link

Edited by bangank36

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
1 hour ago, IsaWP said:

Thank you. It wasn't working when I tried that before but it is now!

 

Have you added the new button on your site?

I've checked again and found nothing wrong

image.png.f9ef9e5ad7be40a64816384e48c92536.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 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
22 hours ago, IsaWP said:

Hi, It's working as intended now just need to adjust the sizing for BLOG and SHOP as for some reason they are not the same size on mobile as the other links.

I see you used this code, you can increase 47 & 38

@media screen and (max-width: 767px) {
    .header-menu-nav-item [href="https://www.flygirlblog.com"] {
        font-size: 47px !important;
    }
}
@media screen and (max-width: 767px) {
    .header-menu-nav-item [href="https://www.penguinrandomhouse.com/books/600680/who-will-you-be-by-andrea-pippins/"] {
        font-size: 38px;
    }
}

Also, you should change 767px to 991px, because on tablet, same problem appears

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
10 hours ago, tuanphan said:

I see you used this code, you can increase 47 & 38

@media screen and (max-width: 767px) {
    .header-menu-nav-item [href="https://www.flygirlblog.com"] {
        font-size: 47px !important;
    }
}
@media screen and (max-width: 767px) {
    .header-menu-nav-item [href="https://www.penguinrandomhouse.com/books/600680/who-will-you-be-by-andrea-pippins/"] {
        font-size: 38px;
    }
}

Also, you should change 767px to 991px, because on tablet, same problem appears

Great, thank you so much!

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.