How to move windows dropdown notifications with CSS

Hi,
I have a wordpress with buddypress. In computers (descktop) "windows dropdown notifications" are showed from the "notification icon" to the left area. It is ok. I add picture:
http://subefotos.com/ver/?fbf3e86d52da026f3e2fa5feab784579o.jpg
In mobiles devices, "windows dropdown notifications" are showed from the "notification icon" to the right area. It is no correct because "windows dropdown notifications" go out to the screen... I add picture:
http://subefotos.com/ver/?18899364ec7b827ea87f7c05a5453a88o.jpg
With ULTIMATE BRANDING PLUGIN I can add CSS.
So my question is: using CSS into ULTIMATE BRANDING PLUGIN, can I show (in mobiles devices) "windows dropdown notifications" from the "notification icon" to the left area (just like it is showed in the monitor of computers - Descktop)?
I know I can use the following code for to aply CSS changes only in mobiles:
@media screen and (max-width:620px)
but I don't know the part of code in order to move the "windows dropdown notifications" to the left area.
Can you provide me the entire/complete code?
=====
I also add the following:
in mobiles devices admin bar is not showed...
In order to show admin bar I use the following code into CSS:
@media screen and (max-width:782px) {
#wpadminbar {
display:block;
}
html {
position:absolute;
top:-46px;
}
}
But it is not enough... in mobiles devices the "icon notification" is not showed, so in order to show it I use the following code into CSS:
#wp-toolbar > ul > li {
display: block;
}
I hope your answer about how move "dropdown windows notification".
Thanks for your support.

  • Francesc Prada
    • Design Lord, Child of Thor

    Hi Vaughan, thanks for your reply.
    Now, with your code the "Notification Window Dropdown" is showed from the icon to the left area. So it is good.
    But now, if the mobile is very small, the first word, or the first and the second word (depending of the phrase showed in the notification) goes out of the screen in the left area.
    So, when the "phrase of notification" goes out to the left area of the screen, I think the solution is to show the "phrase of notification" in two lines because in small mobiles device there is no a big area in order to show the "phrase of notification" all in one line.
    Is there a CSS code for to do that?
    If there is a code for to resolve the problem, can you provide that? I ask you to provide the complete code (for the problem I wrote in the first post of this thread, and for this second problem I have wrote in this post) because I am not informatic, so maybe I cant understand your suggestion...
    So, please, let me know the complete code for to show correctly (responsive mode) the "Notification Window Dropdown".
    Thanks for your support.

  • Francesc Prada
    • Design Lord, Child of Thor

    Hi Vaughan,
    first, thanks for your reply.
    Your reply number 2, where you add
    max-width: 150px;
    dont run...
    I have also done a lot of tests changing number of the px but it dont run.
    Have you test the code you provide me in your computer (reducing the size of the window)?
    I give you a suggestion: when I go to http://www.mysite.com/wp-admin/ the "Notification Window Dropdown" is smaller (narrower). Maybe this can help you for understand why "max-width" code dont run. It is only a suggestion...
    Please, let me know where is the problem.
    Thanks.

  • Vaughan
    • Support/SLS MockingJay

    Hi,

    Can you try the following:

    @media screen and (max-width:782px) {
        #wpadminbar .ab-top-secondary .menupop .ab-sub-wrapper {
            right: 0;
            left: auto;
        }
    #wpadminbar .quicklinks .menupop ul li a {
        width: 100% !important;
        word-wrap: normal !important;
        white-space: pre-wrap !important;
        height: auto !important;
        min-width: 0 !important;
    }
    #wpadminbar .quicklinks .menupop ul li {
        width: 150px !important;
    }
    }

    Hope this helps

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.