On Site Notifications bell moved to left, please help

Question

Help, I updated the On Site Notifications plugin and it moved the Bell to the top left, but I want it to be on the top right. 

The theme I'm using is SnowFlat. This topic may have been discussed before, but when I searched for similar topics, I could not find any questions to solve this issue. 

Is there anyone who can explain it to me in detail?

Answer 1

There's a small tweak that needs to be done for that last version (1.4.6 and up). I've explained it here on this post (scroll down to the SnowFlat section of that post) and also pushed a commit to the Q2A development.

---

But here's a short explanation:

SnowFlat theme 

If you're using SnowFlat or created a custom theme based off of SnowFlat, you'll need to make a small tweak in your qa-theme.php file.
Here's the updated file: question2answer/pull/986/files/SnowFlat

Basically, you'll need to remove the  qam-account-items-wrapper  from inside the  nav_user_search()  function, and wrap it around  nav_user_search()  instead:

public function nav_user_search()
{
     $this->output('<div class="qam-account-items-wrapper">'); 
    ...
     $this->output('</div> <!-- END qam-account-items-wrapper -->'); 
}

public function nav_main_sub()
{
    ...
     $this->output('<div class="qam-account-items-wrapper">'); 
        $this->nav_user_search();
     $this->output('</div>'); 
    ...
}

For other themes & theme developers

You can simply wrap your  nav_user_search()  like the example demonstrated above in the SnowFlat code snippet, add a CSS  display:inline-block;  property to the siblings (for example  .qam-account-toggle  ,  .qam-account-items  in SnowFlat) and should be good to go.

---

PS:

Because you've customized the background-color of your Top-Navigation-Bar on your SnowFlat theme, you might also need to change the color of the bell to a darker color:

q2apro-on-site-notifications > css > osn-styles.min.css

.qam-account-items-wrapper #osnbox .osn-bell {
    fill: #ffffff; /* remove this line */ 
    fill: #000000; /* add this line */ 
}