custom-css 7.1 Navigation with images to replace text

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.

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

Let me know how it works on your site

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

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

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.

Hi @IsaWP,

On mobile, it seems that we have the burger menu

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

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

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

That worked, thank you!

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

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

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

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

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.

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

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!