studio_slp Posted July 6, 2020 Share Posted July 6, 2020 (edited) Hello SS community ! Hi @tuanphan I am looking to create a navigation using images, versus text. ex. https://www.mikeperrystudio.com/ Does anyone have any experience with this, or know how I would go about solving this? 1. I use Squarespace 7.1 2. I would like to create a NAV using images, instead of text. ex. https://www.mikeperrystudio.com/ 3. On mobile, I would like the hamburger and X to be a custom image(s) as well. ex. https://www.mikeperrystudio.com/ 4. On mobile, when the nav is selected, I would like the option to view, or not view (hide) the site logo when navigation links are viewable. Is this possible? Can you please help advise on how would I go about creating this sort of navigation in Squarespace 7.1? Please let me know if you have any questions? Thanks so much for your help and support! Nic Edited July 6, 2020 by studio_slp Link to comment
tuanphan Posted July 6, 2020 Share Posted July 6, 2020 Can you share site url? 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
studio_slp Posted July 6, 2020 Author Share Posted July 6, 2020 (edited) Hi @tuanphan Thanks for your help. The reference I like is (made on SS I believe) > https://www.mikeperrystudio.com My address where I will use the navigation > www.nicholaskonert.com thanks again and speak more soon! nicholas Edited July 7, 2020 by studio_slp Link to comment
tuanphan Posted July 8, 2020 Share Posted July 8, 2020 With nav images, add this code to Home > Design > Custom CSS /* About */ .header-announcement-bar-wrapper [href="/about"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } /* Art - Design */ .header-announcement-bar-wrapper [href="/art"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } Repeat for other items. Replace href=".." with page url. With Hamburger custom icon, add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } 27CLOUD7 and sharine 2 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
studio_slp Posted July 9, 2020 Author Share Posted July 9, 2020 Thanks @tuanphan! I appreciate your help! I will try out the code and keep you posted! Thank you for the quick reply! x nicholas Link to comment
stinkingcedar Posted July 13, 2020 Share Posted July 13, 2020 On 7/8/2020 at 5:23 AM, tuanphan said: With nav images, add this code to Home > Design > Custom CSS /* About */ .header-announcement-bar-wrapper [href="/about"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } /* Art - Design */ .header-announcement-bar-wrapper [href="/art"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } Repeat for other items. Replace href=".." with page url. With Hamburger custom icon, add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } Will this same methodology apply to SS 7.0 with the Brine family (Impact Template)? Link to comment
tuanphan Posted July 15, 2020 Share Posted July 15, 2020 On 7/14/2020 at 6:29 AM, stinkingcedar said: Will this same methodology apply to SS 7.0 with the Brine family (Impact Template)? Yes, However SS 7.0 uses different class. If you share link to your site, I can check easier. 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
sharine Posted March 23, 2021 Share Posted March 23, 2021 @tuanphan, this is was so helpful. Thank you! Is there any way to make the images appear larger in navigation? Link to comment
tuanphan Posted March 24, 2021 Share Posted March 24, 2021 18 hours ago, sharine said: @tuanphan, this is was so helpful. Thank you! Is there any way to make the images appear larger in navigation? You can increase navigation text size 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
scenedesign Posted June 16, 2021 Share Posted June 16, 2021 On 7/8/2020 at 2:23 AM, tuanphan said: With nav images, add this code to Home > Design > Custom CSS /* About */ .header-announcement-bar-wrapper [href="/about"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } /* Art - Design */ .header-announcement-bar-wrapper [href="/art"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } Repeat for other items. Replace href=".." with page url. With Hamburger custom icon, add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } Hi! Thank you so much for this -- it's been so helpful -- could you tell me how I might modify the code to do this to a folder? I've succeeded at replacing all my menu buttons with an image except the one that is a folder--thanks! Link to comment
scenedesign Posted June 16, 2021 Share Posted June 16, 2021 Additionally, is there a a way to bake the determining of size parameters into this code snippet? I'm finding doing it via the navigation site styles causes my images to either be to small or fall in really weird places on the nav bar. Thanks in advance!! Link to comment
tuanphan Posted June 17, 2021 Share Posted June 17, 2021 23 hours ago, scenedesign said: Additionally, is there a a way to bake the determining of size parameters into this code snippet? I'm finding doing it via the navigation site styles causes my images to either be to small or fall in really weird places on the nav bar. Thanks in advance!! Can you share site url? We can check easier 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
scenedesign Posted June 18, 2021 Share Posted June 18, 2021 On 6/16/2021 at 10:30 PM, tuanphan said: Can you share site url? We can check easier Hi! So sorry, it's currently private. I did figure out the aforementioned issue, but am now noticing that each link disappears when clicked on (so, if you click on "about," the word "about" disappears on the menu bar). Using 7.1. Do you know what could be causing this? Link to comment
tuanphan Posted June 21, 2021 Share Posted June 21, 2021 On 6/19/2021 at 3:32 AM, scenedesign said: Hi! So sorry, it's currently private. I did figure out the aforementioned issue, but am now noticing that each link disappears when clicked on (so, if you click on "about," the word "about" disappears on the menu bar). Using 7.1. Do you know what could be causing this? You can setup password & share url 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
scenedesign Posted June 26, 2021 Share Posted June 26, 2021 On 6/16/2021 at 10:30 PM, tuanphan said: Can you share site url? We can check easier Hi! Yep! Shooting you an email - thank you! Link to comment
tuanphan Posted June 30, 2021 Share Posted June 30, 2021 On 6/27/2021 at 6:04 AM, scenedesign said: Hi! Yep! Shooting you an email - thank you! Hi. Have you solved it yet? If not, can you send it again? 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
IsaWP Posted November 26, 2021 Share Posted November 26, 2021 Hi, I have tried this for a site and it is working fine except that when I click a link it disappears. Site is https://clover-carnation-c267.squarespace.com/ Password: India76! It worked fine on 7.0 but now moving the site to 7.1 and this issue is showing up. Thank you in advance Link to comment
27CLOUD7 Posted November 27, 2021 Share Posted November 27, 2021 (edited) On 7/8/2020 at 11:23 AM, tuanphan said: With nav images, add this code to Home > Design > Custom CSS /* About */ .header-announcement-bar-wrapper [href="/about"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } /* Art - Design */ .header-announcement-bar-wrapper [href="/art"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/burger-731298_640-min.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } Repeat for other items. Replace href=".." with page url. With Hamburger custom icon, add to Home > Design > Custom CSS .burger-box div { display: none; } .burger-box { background-image: url(https://static.thenounproject.com/png/3143942-42.png); background-size: contain; background-repeat: no-repeat; background-position: center center; } thanks for this! wanted custom images on my navigation bar and found this thread! There's just one issue though: once I click on the link, the image disappears. Here's my website for reference: https://www.27cloud7.com (please be kind, I'm still building it :P) Edited November 27, 2021 by 27CLOUD7 Additional Information Link to comment
27CLOUD7 Posted November 27, 2021 Share Posted November 27, 2021 On 11/26/2021 at 10:57 AM, IsaWP said: Hi, I have tried this for a site and it is working fine except that when I click a link it disappears. Site is https://clover-carnation-c267.squarespace.com/ Password: India76! It worked fine on 7.0 but now moving the site to 7.1 and this issue is showing up. Thank you in advance I'm having the same issue, did you manage to solve it? Link to comment
IsaWP Posted November 27, 2021 Share Posted November 27, 2021 Yes, the following css worked for me: /* Work */ .header-announcement-bar-wrapper [href="/work"], .header-menu--folder-list .header-menu-nav-item [href="/work"]{ background-image: url(https://yourimagelink.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } Do the same for each link/image. Hope it helps! 27CLOUD7 1 Link to comment
27CLOUD7 Posted November 27, 2021 Share Posted November 27, 2021 3 hours ago, IsaWP said: Yes, the following css worked for me: /* Work */ .header-announcement-bar-wrapper [href="/work"], .header-menu--folder-list .header-menu-nav-item [href="/work"]{ background-image: url(https://yourimagelink.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } Do the same for each link/image. Hope it helps! Yup it did! Thanks a lot 🙂 IsaWP 1 Link to comment
KelsieLauck Posted June 21, 2022 Share Posted June 21, 2022 Okay, so I got this to work, but I needed the image to render smaller than it was loading. I managed to get it smaller on desktop, but now it is out of line in mobile! This is the code I used /* Burger */ .header-announcement-bar-wrapper [href="/burger"], .header-menu--folder-list .header-menu-nav-item [href="/burger"]{ height: 32px; width: 20px; background-image: url(https://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b2249c3b64af02534957c8/1655841948620/OHM+Burger+2.pnghttps://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b223486887c3517510ab82/1655841608309/OHMBurger.pnghttps://yourimagelink.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } I've attached screenshoots of how it is currently rendering. Link to comment
tuanphan Posted June 22, 2022 Share Posted June 22, 2022 12 hours ago, KelsieLauck said: Okay, so I got this to work, but I needed the image to render smaller than it was loading. I managed to get it smaller on desktop, but now it is out of line in mobile! This is the code I used /* Burger */ .header-announcement-bar-wrapper [href="/burger"], .header-menu--folder-list .header-menu-nav-item [href="/burger"]{ height: 32px; width: 20px; background-image: url(https://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b2249c3b64af02534957c8/1655841948620/OHM+Burger+2.pnghttps://static1.squarespace.com/static/6126e75fd94a5022e15cc34a/t/62b223486887c3517510ab82/1655841608309/OHMBurger.pnghttps://yourimagelink.png)!important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; color: transparent !important; } I've attached screenshoots of how it is currently rendering. What is your site url? We can check easier 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
KristenRuthSmith Posted February 16, 2023 Share Posted February 16, 2023 On 7/8/2020 at 2:23 AM, tuanphan said: /* About */ .header-announcement-bar-wrapper [href="/about"] { background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg); background-size: contain; background-repeat: no-repeat; background-position: center center; color: transparent !important; } @tuanphan This is working wonderfully on desktop! Is there a way to also replace the nav with the image on mobile nav? Link to comment
tuanphan Posted February 21, 2023 Share Posted February 21, 2023 On 2/16/2023 at 8:57 AM, KristenRuthSmith said: @tuanphan This is working wonderfully on desktop! Is there a way to also replace the nav with the image on mobile nav? What is your site url? We can check easier 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment