JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 @tuanphan Here is an example video of what it does. tuanphan.mp4 Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay I mean you want to do (1) (like video) or (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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 That's my site now. I want it to stay transparent throughout the scroll. I want it to be solid only when at the top. like this website https://www.taylorswift.com/ Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay Okay. Remove all code from here: and here then add this to Home > Design > Custom CSS .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } and 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) { 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 @tuanphan A bit confused. Can you tell me what to add as a whole code? I'll just delete the previous codes you told me to add in entirety. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay then add this code to Home > Design > Custom CSS .sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: rgba(255,255,255,0.5); } and add the SCRIPT Code 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) { 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 It works but not smooth, It kinda "snaps" into place. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 I think the problem is caused by the template. Perhaps a little modification to the banner 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
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 Not sure if it's template. I changed banner and adjusted banner and it would still do it. Link to comment
JohnWay Posted October 16, 2019 Author Share Posted October 16, 2019 Any ideas? Would be the las thing I need. Link to comment
tuanphan Posted October 16, 2019 Share Posted October 16, 2019 @JohnWay you can edit if (window.pageYOffset > sticky) to, it can improve a bit if (window.pageYOffset > sticky+600) 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
JohnWay Posted October 22, 2019 Author Share Posted October 22, 2019 On my tablet device the navigation bar at the top is just congested and looks bad. How do I make it where if it isn't enough space for everything it will just collapse into the menu icon? Or even auto response to size of screen? Link to comment
JohnWay Posted October 22, 2019 Author Share Posted October 22, 2019 On 10/16/2019 at 4:50 AM, tuanphan said: @JohnWay you can edit if (window.pageYOffset > sticky) to, it can improve a bit if (window.pageYOffset > sticky+600) On my tablet device the navigation bar at the top is just congested and looks bad. How do I make it where if it isn't enough space for everything it will just collapse into the menu icon? Or even auto response to size of screen? website is https://corn-contrabass-ax3n.squarespace.com/ password is - view Link to comment
JohnWay Posted October 22, 2019 Author Share Posted October 22, 2019 It's not even and doing that on tablet view. I want them to collapse like in the mobile view and show an icon when it's not enough space @tuanphan Link to comment
tuanphan Posted October 22, 2019 Share Posted October 22, 2019 @JohnWay collapse.. It need to write custom js. Quite complex, and it's beyond the scope of free support here. You can use CSS to decrease font size/padding or split header to 2 lines.. 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
JohnWay Posted October 22, 2019 Author Share Posted October 22, 2019 1 hour ago, tuanphan said: @JohnWay collapse.. It need to write custom js. Quite complex, and it's beyond the scope of free support here. You can use CSS to decrease font size/padding or split header to 2 lines.. How much? Link to comment
tuanphan Posted October 23, 2019 Share Posted October 23, 2019 @JohnWay Try adding to Home > Design > Custom CSS @media screen and (max-width:990px) { /* Show Mobile Header */ [data-nc-base="mobile-bar"] { display: block; } /* Remove Tablet Header */ header.Header.Header--top { display: none !important; } } 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
JohnWay Posted October 23, 2019 Author Share Posted October 23, 2019 1 hour ago, tuanphan said: @JohnWay Try adding to Home > Design > Custom CSS @media screen and (max-width:990px) { /* Show Mobile Header */ [data-nc-base="mobile-bar"] { display: block; } /* Remove Tablet Header */ header.Header.Header--top { display: none !important; } } wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth? Link to comment
JohnWay Posted October 24, 2019 Author Share Posted October 24, 2019 21 hours ago, JohnWay said: wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth? 23 hours ago, tuanphan said: @JohnWay Try adding to Home > Design > Custom CSS @media screen and (max-width:990px) { /* Show Mobile Header */ [data-nc-base="mobile-bar"] { display: block; } /* Remove Tablet Header */ header.Header.Header--top { display: none !important; } } @tuanphan wow your a god. I have one more question and I should be good with site. How do I disable parallex only for mobile? Or, if it can't be disabled make it smooth? It kinda snaps as you scroll on phone and is not smooth? Link to comment
tuanphan Posted October 24, 2019 Share Posted October 24, 2019 @JohnWay You can post to different question to get more help from other members. Have not found a way to disable 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
Archived
This topic is now archived and is closed to further replies.