Cookie Alert Banner Sits Under Left Nav

HTML & CSS
1

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

2

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

1 Like
3

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
4

Yeah - go big! :biggrin:

1 Like
5

Thank you everyone, its all fixed now :slight_smile:

1 Like
6

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