I am building a simple vertical notification panel like stack overflow notification panel But Pop-Up is not staying to the right, When I half the browser window then it is working fine But when I make browser window full then the Pop-up is going to left, I mean, pop-up box is not staying to the right where the open button is.

$(".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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

What have I tried ? :-

I have also tried :-

@media screen and (max-width: 650px) {
  .notification_dd {
    right: -150px;

  }
}

But it is also going to left.

What I am trying to do ? :-

I am trying to make pop-notification stable to right right below the button and that doesn't change to left.

Any help would be much Appreciated. Thank You

Edit :-

As you see that The Problem is not showing in the snippet But you can try in your machine.

CodePudding user response：

Can you try this code, it might work for you.

$(".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: 0px;
  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;
  width: 100%;
}

.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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>