I have successfully implemented the Cookie Yes plugin with wordpress, however, there is one final issue that I need help with.
Our goal is to ensure that the banner always remains at the top of the page without overlapping the navigation bar. To achieve this, I had to add some additional CSS to make it stick to the top.
I also included a JS function that hides the banner and moves the nav back to the top when the user clicks on the confirm cookie link.
The problem I am facing is that upon refreshing the page, the styles are lost, leaving a large gap at the top where the banner used to be.
How can I make sure that these additional styles are retained? You can view the site here.
$(document).ready(function(){
$('#cookieToggle').on('change', function(){
const value = $(this).prop('checked');
onCookieSelection (value);
});
function onCookieSelection (val) {
$('#divAcceptCookiesConfirm').toggle(val);
$('#divAcceptCookiesReject').toggle(!val);
}
$('#cookieToggle').prop( "checked", true );
onCookieSelection(true);
$('#wt-cli-accept-all-btn').on('click', function() {
$('html.has-not-scrolled #desktop-header').css('top', '0px');
$('#mobile-header').css('top', '0px');
$('main').css('top', '0px');
});
$('#wt-cli-reject-btn').on('click', function() {
$('html.has-not-scrolled #desktop-header').css('top', '0px');
$('#mobile-header').css('top', '0px');
$('main').css('top', '0px');
});
});