Cookie Alert Banner Sits Under Left Nav

Morning from -2Β° but sunny York UK :slight_smile:

On this site http://www.website-project-manager.co.uk/ The cookie alert banner that sits in the footer tucks under the left nav. Ive tried to re position it but whilst it looks perfect in mobile it looks bad in desktop as half of it sits under the left nav :frowning:

Here is the relevant CSS:

/* Cookie Banner */

.cookie-banner {
	position: fixed;
	bottom: 40px;
	left: 10%;
  right: 10%;
  width: 80%;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

.close {
  height: 20px;
  background-color: #777;
  border: none;
  color: white;
  border-radius: 2px;
  cursor: pointer;
}

And JavaScript:

// Cookie banner

if(localStorage.getItem('cookieSeen') != 'shown'){
    $(".cookie-banner").delay(2000).fadeIn();
    localStorage.setItem('cookieSeen','shown')
}

$('.close').click(function(e) {
  $('.cookie-banner').fadeOut(); 
});	

Any tips on how to place it correctly in all viewport sizes?

Thanks in advance,
David

Giving it a z-index of 100 seems to fix it.

1 Like

Hi there Nightwing,

good aterrnoon from 0Β° but sunny Chertsey Surrey

Just add z-index: 3; to your cookie-banner rules
to see it in it’s full glory. :winky:

You could. as @Gandalf has suggested. give it a value
of 100 instead of 3, just to be sure to be sure. :rofl:

It is perfectly placed already. :biggrin:

coothead

1 Like

Yeah - go big! :biggrin:

1 Like

Thank you everyone, its all fixed now :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.