notification dropdown placement to button - css

Question

I have made this concept: https://codepen.io/andrelange91/pen/yLpJRRw?editors=1100
In it, I have a bell icon which when pressed shows a dropdown with notifications.
But, depending on the screensize its never really placed with the arrow on the dropdown pointing at the middle of the bell icon..
How can i accomplish this?
I'm a bit rusty when it comes to frontend programming, and I haven't been able to find any suitable solutions when researching it.
HTML
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Much longer nav link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item notification-wrapper">
<button class="notification-button">
<i class="fas fa-bell"></i>
<span>6</span>
</button>
<div class="notification-popup">
<div class="notification-popup__header">
<h3>Notifikationer</h3>
<button title="marker alle som læst"><i class="fa-solid fa-check"></i></button>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
<div class="notification-item">
<ul>
<li><i class='far fa-newspaper'></i></li>
<li>
<h2>Ny side oprettet</h2>
<p>Tjek den ud her!</p>
Nyhed til notification
</li>
<li>
<button class="" title="Makér denne som læst">
<span><i class="fas fa-check-circle"></i></span>
</button>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<nav>
</nav>
Styling
$clr-white-1: #ecf0f1;
$clr-white-2: darken($clr-white-1, 5%);
$clr-t300: #444;
$clr-t500: #95a5a6;
$clr-p300: #111;
$clr-a300: #e74c3c; //#FF6A6A; //salmon
$container-shadow: 0.5rem 0.5rem 2rem 0 rgba(black, 0.2);
$h-gutter: 2rem;
$v-gutter: 0.75rem;
body {
padding: 5% 0;
margin: 0 0 50px 0;
box-sizing: border-box;
width: 100vw;
height: 100vh;
background: $clr-white-1;
background: linear-gradient(30deg, $clr-white-2, $clr-white-1);
font-family: "Lato", Arial, sans-serif;
font-weight: 500;
letter-spacing: 0.05rem;
nav {
position: absolute;
left: 500px;
}
}
.notification-wrapper {
position: relative;
}
button.notification-button {
position: relative;
margin-right: 1em;
border-radius: 5px;
background: none;
border: none;
i {
margin: 0.5rem;
}
&:nth-of-type(1) {
i {
background: -webkit-linear-gradient(300deg, #acccea, #6495ed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
&:nth-of-type(2) i {
background: -webkit-linear-gradient(300deg, #fff9ab, #00b8ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
svg,
.fa-bell {
color: white;
font-size: 28px;
}
span {
position: absolute;
user-select: none;
cursor: default;
font-size: 0.6rem;
background: $clr-a300;
width: 1.2rem;
height: 1.2rem;
color: $clr-white-1;
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
top: -0.33rem;
right: 0;
box-sizing: border-box;
animation-name: scaleCount;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 1s;
animation-delay: 0s;
#keyframes scaleCount {
0% {
transform: scale(0);
}
40% {
transform: scale(1);
}
60% {
transform: scale(0.5);
}
80% {
transform: scale(1.25);
}
}
}
}
.notification-popup {
display: none;
&.active {
display: block;
}
&:before {
// triangle
content: "";
position: absolute;
top: 1px;
right: 0;
width: 0;
height: 0;
transform: translate(-1rem, -100%);
border-left: 0.75rem solid transparent;
border-right: 0.75rem solid transparent;
border-bottom: 0.75rem solid white;
}
cursor: default;
position: absolute;
z-index: 999;
top: 56px;
left: -210px;
width: 400px;
font-weight: 300;
background: white;
border-radius: 0.5rem;
box-sizing: border-box;
box-shadow: $container-shadow;
animation-name: dropPanel;
animation-iteration-count: 1;
animation-timing-function: all;
animation-duration: 0.75s;
&__header {
h3 {
text-transform: uppercase;
font-size: 75%;
font-weight: 700;
color: #84929f;
padding: $v-gutter * 2 $h-gutter;
display: inline-block;
}
button {
float: right;
border: none;
background: none;
i {
text-transform: uppercase;
font-size: 22px;
font-weight: 700;
padding: $v-gutter * 2 $h-gutter;
color: #84929f;
}
}
}
.notification-item {
border-bottom: 2px solid lightgrey;
display: block;
overflow: hidden;
width: 100%;
padding: 10px 0;
ul {
li {
float: left;
list-style: none;
padding: 5px;
position: relative;
&:first-child {
i {
font-size: 22px;
}
}
&:last-child {
right: $h-gutter;
margin-left: $v-gutter;
float: right;
}
button {
&:hover {
opacity: 0.8;
cursor: pointer;
}
span {
color: #b5c4d2;
font-size: 140%;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
}
background: none;
border: none;
}
}
}
}
}
#keyframes dropPanel {
0% {
opacity: 0;
transform: translateY(-100px) scaleY(0.5);
}
}
And for completeness sake my js
$(".notification-button").on("click", function () {
const ele = $(".notification-popup");
if (ele.hasClass("active")) {
console.log("remove active");
ele.removeClass("active");
} else {
console.log("add active");
ele.addClass("active");
}
});
document.addEventListener(
"click",
function (event) {
// If user either clicks X button OR clicks outside the modal window, then close modal by calling closeModal()
if (
event.target.closest(".notification-button") == null &&
event.target.closest(".notification-popup") == null
) {
console.log("remove active click outside");
$(".notification-popup").removeClass("active");
}
},
false
);

Answer 1

Don't position the popup with a negative left value, but use right: 50%; instead. That gets you the right corner aligned to the middle of the li that contains the button.
And then add transform: translateX(20px); to compensate for about half of the button width. Or use translateX(1.25em) if you want to keep it dynamic regarding font size.

Answer 2

Try using .notification-popup{ transform: center top; }