Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thanks for getting back to me. This was one of the solutions I tried while I was tinkering with it in my browser. I found that it works in the browser via the inspection tool, but when I paste it in the Custom CSS, it doesn't work. That portion is always visible.
Hi Team,
I'm trying to increase the width of the slide out widget area that shows up on the off-canvas menu on hover from 340px to 500px.
The below doesn't seem to work for me in the custom css code. I've also tried using !important but makes it worse.
#slide-out-widget-area.slide-out-from-right-hover {
transform: translate3d(501px, 0, 0) !important;
-webkit-transform: translate3d(501px, 0, 0) !important;
-ms-transform: translate3d(501px, 0, 0) !important;
width: 500px !important;
}
Please help. Thank you.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#slide-out-widget-area.slide-out-from-right-hover { transform: translate3d(501px, 0, 0) ; -webkit-transform: translate3d(501px, 0, 0) ; -ms-transform: translate3d(501px, 0, 0) ; width: 500px !important; }Thanks
ThemeNectar Support Team
Hey Tahir,
Thanks for getting back to me. This was one of the solutions I tried while I was tinkering with it in my browser. I found that it works in the browser via the inspection tool, but when I paste it in the Custom CSS, it doesn't work. That portion is always visible.
Attached files: Screenshot 2024-09-15 at 7.29.25 PM.png
Try the below revised CSS instead
html body #slide-out-widget-area.slide-out-from-right-hover { transform: translate3d(501px, 0, 0) ; -webkit-transform: translate3d(501px, 0, 0) ; -ms-transform: translate3d(501px, 0, 0) ; width: 500px !important; }Thanks
ThemeNectar Support Team
This one worked. Thank you!