How can I create blank footer widget areas (so the default title and 'Click here to assign a widget to this area.' does not appear)? I'd like text content in area one and then a footer navigation in area four so that they are effectively aligned left and right with a nice space in between in the smae way that the footer copyright and social media icons are displayed in the other footer area.
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):
Thanks Tahir, this works fine for the desktop view however when viewed on a mobile device although it shows no content, it leaves a gap (so the blocks themselves are still there). Is there any way to just not have them - have just two columns rather than the four but they are displayed with the same space or to have them but they are disabled when on a mobile/stacked view?
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):
@media only screen and (max-width: 1000px) and (min-width: 1px) {
#footer-outer .col.span_3:nth-child(2), #footer-outer .col.span_3:nth-child(3) {
display:none !important;
}
}
How can I create blank footer widget areas (so the default title and 'Click here to assign a widget to this area.' does not appear)? I'd like text content in area one and then a footer navigation in area four so that they are effectively aligned left and right with a nice space in between in the smae way that the footer copyright and social media icons are displayed in the other footer area.
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):
#footer-outer .col.span_3:nth-child(2), #footer-outer .col.span_3:nth-child(3) { text-indent: -9999px; }Thanks
ThemeNectar Support Team
Thanks Tahir, this works fine for the desktop view however when viewed on a mobile device although it shows no content, it leaves a gap (so the blocks themselves are still there). Is there any way to just not have them - have just two columns rather than the four but they are displayed with the same space or to have them but they are disabled when on a mobile/stacked view?
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):
@media only screen and (max-width: 1000px) and (min-width: 1px) { #footer-outer .col.span_3:nth-child(2), #footer-outer .col.span_3:nth-child(3) { display:none !important; } }Thanks
ThemeNectar Support Team