I'm having an issue with the banner I created for my project. It seems to be overlapping with text and images, hiding behind them. How can I fix this? Unfortunately, I can't post the link to my project here due to other files present.
The specific banner in question is located in the bottom right corner where it says "Hi there! Thanks for.....". I need it to be brought forward so it doesn't hide behind any elements. I've tried adjusting the CSS in assets/css/banner.css and the HTML code near the top of the file, but I might be missing something that needs to be added.
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner');
banner.classList.add('exponea-in');
return banner.querySelector('.exponea-close').addEventListener('click', function() {
return banner.classList.remove('exponea-in');
});
});
}).call(this);@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.exponea-banner.exponea-in {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner .exponea-close {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner .exponea-label {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner .exponea-text {
margin-bottom: 8px;
}
.exponea-banner .exponea-count {
font-weight: 500;
}
.exponea-banner .exponea-label {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}<div class="exponea-banner">
<div class="exponea-close">
×
</div>
<div class="exponea-text">
Hi there! Thanks for stumbling upon my website!
</div>
<div class="exponea-label">
- Hussain Omer
</div>
<div class="exponea-label2">
(scroll down a bit to close this banner) 😃
</div>
</div>Any assistance would be greatly appreciated!