Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#to-top[style="bottom: 17px;"] {
transform: scale(2) translateX(-10px) translateY(-10px);
}
body[data-button-style*="rounded"] #to-top {
transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear;
-webkit-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear;
-moz-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear;
}
The small to big transitions cant be removed as it doesnt completely disaappear as mentioned in the earlier ticket.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hello!
How do I make icon (including circle or square) what scrolls top of the page 2 X bigger?
Tried different CSS but seems more complicated than I guessed.
http://nimb.ws/KS92RH
This one (if I wasn't clear enough)
Hey,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#to-top { transform: scale(2) translateX(-10px) translateY(-10px); }Thanks
ThemeNectar Support Team
It worked fine but now is half visible even without page scrolling. What is not looking good. So this should be fixed somehow as well ;)
Thanks!
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#to-top[style="bottom: 17px;"] { transform: scale(2) translateX(-10px) translateY(-10px); } body[data-button-style*="rounded"] #to-top { transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; -webkit-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; -moz-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; }Thanks
ThemeNectar Support Team
I changed my menu setting and this code stopped working, need a new one because was not able to figure it out myself!
Also I would like to be default color red and hover color black.
Hey Again,
The Css is still working when i add it to the Live Browser : http://prntscr.com/kqrywl ? .
Best
ThemeNectar Support Team
Funny or strange this code will work (loads correctly) only if I turn ON "Move Dynamic/Custom CSS Into External Stylesheet?"
Anyway I still see a small version of "top of page" button and then it transitions 2x bigger like I want it to be.
But I want it to be from the beginning 2x bigger (so user would not see smaller version of this top of page button)
So solution what you provided is kind of working but not like I wanted! Could you fix it with correct css?
Also help me out with color changes. In the beginning it should be red and on hover black.
The small to big transitions cant be removed as it doesnt completely disaappear as mentioned in the earlier ticket.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
#to-top[style="bottom: 17px;"] { transform: scale(2) translateX(-10px) translateY(-10px); } body[data-button-style*="rounded"] #to-top { transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; -webkit-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; -moz-transition: all 0.3s cubic-bezier(.55,0,.1,1),background-color 0.1s linear; } body[data-button-style*="rounded"] #to-top { background-color: #f02800 !important; } body[data-button-style*="rounded"] #to-top:hover:after { background-color: #000 !important; }Thanks
ThemeNectar Support Team
Thanks it worked fine!