JohnWay Posted October 16, 2019 Share Posted October 16, 2019 I've added these links to my navigation bar. I used this code as the link title <i class="fa fa-youtube" style="font-size:25px;"></i> What I want to do it make it where when I hover over the link I make specific colors. For example when you hover over twitter it would be blue, when you hover over twitch it would be purple. What would I insert into this code to do this hover effect? Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay Add to Home > Design > Custom CSS. Do similar with other icons .fa-youtube:hover { color: red; } If it doesn't work, please share site url to check code. 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 Hey do I put a color code? Like a custom color code. It works but I want to put a code. Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 1 hour ago, tuanphan said: @JohnWay Add to Home > Design > Custom CSS. Do similar with other icons .fa-youtube:hover { color: red; } If it doesn't work, please share site url to check code. Hey do I put a color code? Like a custom color code. It works but I want to put a code. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 you can use color name (color: red;) or color code (color: #ff0000;) or rgb (rgb(0,0,0) or rgba, or hsl.. @JohnWay 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 Thank You! I have one more question. How would I change spotlight color for secondary navigation bar? What would the code be? Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 I mean Active color for "HEADER: SECONDARY NAVIGATION" Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 33 minutes ago, tuanphan said: you can use color name (color: red;) or color code (color: #ff0000;) or rgb (rgb(0,0,0) or rgba, or hsl.. @JohnWay How would change I Active color for "HEADER: SECONDARY NAVIGATION" what code is that? Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay Each template will have different code. Can your share your site url? 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 1 minute ago, tuanphan said: @JohnWay Each template will have different code. Can your share your site url? https://corn-contrabass-ax3n.squarespace.com/ is my template password - view password is view. My secondary navigation bar to the right of my social icons. I want to have the light up red when 'activate' and hover over. So If I'm on that page of that tab it is red. I have it as secondary so it doesn't effect social colors. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay .Header-nav--secondary *:hover { color: red !important; } .Header-nav--secondary .Header-nav-item--active { color: blue !important; } 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 14 minutes ago, tuanphan said: @JohnWay .Header-nav--secondary *:hover { color: red !important; } .Header-nav--secondary .Header-nav-item--active { color: blue !important; } Thank You so much! Do you work for Square space or do you just help people? I'm so thankful! Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay You're welcome. Please like if the answer is correct. I don't work for Squarespace. Just help community 😉 I'm freelancer, if you need more help with websites, you can consider my service (in signature) 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 2 hours ago, tuanphan said: @JohnWay You're welcome. Please like if the answer is correct. I don't work for Squarespace. Just help community 😉 I'm freelancer, if you need more help with websites, you can consider my service (in signature) Thank You! I have one more question. How do I make the navigation bar fixed? And when i scroll the opacity goes down a little but so it is a bit transparent? Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 8 minutes ago, tuanphan said: @JohnWay header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } Also what about the opacity? I want it to be just a bit transparent only when you start scrolling. I'll tip you if you have cash app? 🙂 Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay Try header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 2 minutes ago, tuanphan said: @JohnWay Try header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } It made it transparent but permanently. I only want it to be a bit transparent when scrolling. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay First, add to Home > Design > Custom CSS header.Header.Header--top { position: fixed; top: 0; left: 0; right: 0; z-index: 999; } .sticky { background: rgba(255,255,255,0.5); transition: all 0.75s; } Next, add to Home > Settings > Advanced > Code Injection > Footer <script> window.onscroll = function() {myFunction()}; var header = document.getElementsByClassName("Header--top"); var header2 = header[0] var sticky = header2.offsetTop; function myFunction() { if (window.pageYOffset > sticky & window.pageYOffset < sticky + 300) { header2.classList.add("sticky"); } else { header2.classList.remove("sticky"); } } </script> 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 It made it transparent but permanently. I only want it to be a bit transparent when scrolling. Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 5 minutes ago, JohnWay said: It made it transparent but permanently. I only want it to be a bit transparent when scrolling. I messed something up not my social icons disappeared i made? Think I deleted something on accident? Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 It won't show social links on primary navigation bar anymore? Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 2 minutes ago, JohnWay said: I messed something up not my social icons disappeared i made? Think I deleted something on accident? Perhaps you mistakenly deleted some code 9 minutes ago, JohnWay said: It made it transparent but permanently. I only want it to be a bit transparent when scrolling. Still not work with CSS & Script? @JohnWay 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 It works for a second then when you scroll further it stops. Also, my social icons went away?op Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay You mean? 1. When scrolling, it will be transparent, and when scrolling over it will return to normal The above two code snippets did that. 2. Or When scrolling, it becomes transparent, and so on 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.