I have set the column with the title "Chi siamo" to be sticky, and as you can see on desktop, it works correctly. However, I noticed that on mobile (tablet too), the column is not sticky.
I would like to know if it's possible to make the column sticky on mobile as well, maintaining the same functionality as on desktop.
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):
@media only screen and (min-width: 1px) and (max-width: 999px) {
.n-sticky.theiaStickySidebar {
position: fixed !important;
width: auto !important;
left: 0px !important;
}
}
Let me know if this helps! Happy to assist further if needed.
It didn't work. I tried to remove the "theiaStickySidebar" class since i didn't find that in the html of the page, but in that way the titles disappear. if you want to check the page i leave the css that make the titles disappear
You will have to refresh the page if you are resizing the browser to the mobile width and testing.
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):
@media only screen and (min-width: 1px) and (max-width: 999px) {
.nectar-sticky-column {
position: fixed !important;
width: auto !important;
left: 0px !important;
}
}
as I told you before, in this way the headers will be fixed on the page. this is problematic: if you look down the page, there are more than one. they are in fact sticky solely within the row, not across the page
Hi!
I have set the column with the title "Chi siamo" to be sticky, and as you can see on desktop, it works correctly. However, I noticed that on mobile (tablet too), the column is not sticky.
I would like to know if it's possible to make the column sticky on mobile as well, maintaining the same functionality as on desktop.
Thank you
have a nice day
Hey Again,
Thanks for reaching out! .
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):
@media only screen and (min-width: 1px) and (max-width: 999px) { .n-sticky.theiaStickySidebar { position: fixed !important; width: auto !important; left: 0px !important; } }Let me know if this helps! Happy to assist further if needed.
Best,
ThemeNectar Support Team
It didn't work. I tried to remove the "theiaStickySidebar" class since i didn't find that in the html of the page, but in that way the titles disappear. if you want to check the page i leave the css that make the titles disappear
Hey Again,
Here’s what you can try:
@media only screen and (min-width: 1px) and (max-width: 999px) { .nectar-sticky-column { position: fixed !important; width: auto !important; left: 0px !important; } }Best,
ThemeNectar Support Team
i'm sorry, but as you can see the page is broken in this way. i think that something with the js that add the sticky class is not working properly.
Hey Again,
The JS code does not get enabled in Mobile screen sizes , to confirm this try refreshing the page after switching to mobile width in the browser.
At the moment there is no such JS code to enable the sticky feature for mobile the same as Desktop.
However have noted it in the wishlist.
Best
ThemeNectar Support Team
okay, thank you. but for now, how can i fix this issue?
Try the below CSS solution.
You will have to refresh the page if you are resizing the browser to the mobile width and testing.
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):
@media only screen and (min-width: 1px) and (max-width: 999px) { .nectar-sticky-column { position: fixed !important; width: auto !important; left: 0px !important; } }Thanks
ThemeNectar Support Team
as I told you before, in this way the headers will be fixed on the page. this is problematic: if you look down the page, there are more than one. they are in fact sticky solely within the row, not across the page
thank you
In that case I am afraid the sticky columns cant be replicated on mobile using CSS alone.
Best
ThemeNectar Support Team
how can i do then not using css?
thank you
Try switching to the CSS powered featured so we can try and write up custom css for it:
Best,
ThemeNectar Support Team