If you want to have conditional padding for your header, give your header the CSS class .mainheader and add an HTML widget to your page (not the header). Paste the following code into your HTML widget:
<script>
function adjustMainHeaderPadding() {
if (window.innerWidth <= 767) {
var mainHeader = document.querySelector('.mainheader');
if (mainHeader) {
mainHeader.style.paddingLeft = '15px';
mainHeader.style.paddingRight = '15px';
}
}
}
// Run the function when the page loads
window.addEventListener('load', adjustMainHeaderPadding);
// Also run the function when the window is resized
window.addEventListener('resize', adjustMainHeaderPadding);
</script>