I'm currently in the process of creating a straightforward vertical notification panel, similar to the one seen on Stack Overflow. However, I've encountered an issue where the pop-up is not staying positioned correctly to the right side. It behaves as expected when I resize the browser window to half its size, but once it's maximized, the pop-up shifts to the left instead of remaining next to the open button.
$(".myNotification .icon_wrap").click(function(){
$(this).parent().toggleClass("active");
// $(".myProfile").removeClass("active");
});
$(".show_all .link").click(function(){
$(".myNotification").removeClass("active");
$(".popup").show();
});
$(".close, .shadow").click(function(){
$(".popup").hide();
});
$(".myB").click(function(){
$(".myNotification").removeClass("active");
});.myNavbar .profile_dd,
.notification_dd{
right: -150px;
max-width: -20px;
background-color: red;
padding: 2em;
width: 350px;
height: auto;
display: none;
position: absolute;
}
.myNavbar .navbar_left .logo a{
font-family: 'Trade Winds';
font-size: 20px;
}
.myNavbar .navbar_right{
display: flex;
}
.myNavbar .navbar_right img{
width: 35px;
}
.myNavbar .navbar_right .icon_wrap{
cursor: pointer;
}
.myNavbar .navbar_right .myNotification{
margin-left: 550px;
}
@media all and (max-width: 1200px) {
.myNavbar .navbar_right .myNotificatio {
margin-right: 550px;
}
}
.myNavbar .navbar_right .myNotification .icon_wrap{
font-size: 28px;
}
.myNavbar .navbar_right .myProfile,
.myNavbar .navbar_right .myNotification{
position: relative;
}
.myNavbar .myProfile .profile_dd ul li .btn{
height: 32px;
padding: 7px 10px;
color: #fff;
border-radius: 3px;
cursor: pointer;
text-align: center;
background: #3b80f9;
width: 125px;
margin: 5px auto 15px;
}
.myNavbar .myProfile .profile_dd ul li .btn:hover{
background: #6593e4;
}
.myNavbar .myProfile.active .profile_dd,
.myNavbar .myNotification.active .notification_dd{
display: block;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css
" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="myNavbar">
<div class="navbar_right">
<myDiv class="myNotification" id="Notif">
<a class="icon_wrap" action=""><i class="far fa-bell"></i></a>
<div class="notification_dd">
This is Notification
</div>
</myDiv>
</div>
</div>What have I attempted? -
I've tried implementing:
@media screen and (max-width: 650px) {
.notification_dd {
right: -150px;
}
}
However, this solution also results in the same leftward shift.
What am I aiming for? -
My goal is to ensure that the pop-notification remains stable on the right-hand side directly beneath the button without shifting to the left.
While the the problem may not be visible in the snippet, you can test it on your own system.