IsaWP Posted November 26, 2021 Share Posted November 26, 2021 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
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 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 IsaWP 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
IsaWP Posted November 26, 2021 Author Share Posted November 26, 2021 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. Link to comment
Beyondspace Posted November 26, 2021 Share Posted November 26, 2021 (edited) 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? Edited November 26, 2021 by bangank36 IsaWP 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
IsaWP Posted November 27, 2021 Author Share Posted November 27, 2021 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 Link to comment
Beyondspace Posted November 27, 2021 Share Posted November 27, 2021 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 IsaWP 1 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
IsaWP Posted November 27, 2021 Author Share Posted November 27, 2021 That worked, thank you! Beyondspace 1 Link to comment
IsaWP Posted November 29, 2021 Author Share Posted November 29, 2021 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
Beyondspace Posted November 29, 2021 Share Posted November 29, 2021 (edited) 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 November 29, 2021 by bangank36 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
IsaWP Posted November 29, 2021 Author Share Posted November 29, 2021 Thank you. It wasn't working when I tried that before but it is now! Link to comment
Beyondspace Posted November 29, 2021 Share Posted November 29, 2021 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you Link to comment
IsaWP Posted November 30, 2021 Author Share Posted November 30, 2021 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. Link to comment
tuanphan Posted December 1, 2021 Share Posted December 1, 2021 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 IsaWP 1 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
IsaWP Posted December 1, 2021 Author Share Posted December 1, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment