Moving an element to the top bar

Hello,

I wonder if you guys can help me with this one.
If you visit http://goo.gl/KaVJ9a you can see a little bubble notification in the lower right corner next to the envelope. Please visit the site with firefox as the Plugin http://www.goroost.com doesn't work without SSL on Chrome.

Back to the question: I want to duplicate and move only the red bubble with the number of notifications to the top corner of the top bar link "NEWS" it should show how many new blog posts there are. So in the end I have both, the bubble in the bottom right corner next to the envelope and the same bubble notification without the bell icon next to the top bar NEWS link.

See the attached screenshot.

If it can be done please explain to me how exactly it's done and how I can replicate it. I suppose it's not very complicated, at least I hope :slight_smile:

Thanks a million!

  • Adam Czajczyk

    Hello @Twelvesix,

    I hope you're well today and thank you for your question!

    I took a look at both your site and the Roost website and I admit I'm a bit confused here as your site (looking at its html source) seem to be quite uncommon as for WordPress based site, although it also seems to be somehow WordPress related (references to Elegant themes, Visual Composer etc). Could you please shed some light on this? Also, is this the plugin you're using there?

    https://wordpress.org/plugins/roost-for-bloggers/

    If this is the plugin then I'm not sure if this could be easily achieved as it doesn't seem to provide any shortcodes and/or template tags that could be used (I've installed it on my test setup to check this out). Therefore, I think an API should be used to create an additional notification receiver that could be placed on the site. If this is the case then it might be better to get in touch with Roost support team as they should be able to help you with this.

    That said, let me know please if I identified the plugin correctly or if there is another solution that you're using and it would be great if you could tell me a bit more about how you website is built (in response to my concerns above).

    Best regards,
    Adam

  • Twelvesix

    Wow you guys really are awesome :slight_smile: Thanks for the fast and elaborate response.

    Yes, it is the correct plugin. The site is running wordpress with a theme and visual composer.
    by the way, you guys are also using this plugin for your bell notification, that's where I got the idea from.
    So as you can see I've modified the bell to fit the style of the theme into a blue box.

    By using CSS I am able to move the bubble as shown in the screenshot attached.
    The following code affects the bubble:

    svg#Icons {
    position: absolute;
    top: 50%;
    right: 50%;
    margin-top: -800px;
    margin-right: 115PX;
    }

    I am hoping you can help me to put the bubble where It needs to be in such way that it doesn't change position from where I want it even when the screensize changes.

    Thanks

  • Adam Czajczyk

    Hello Twelvesix,

    Thanks for your replay. I gave this another look and I think this may be doable with some CSS + a simple jQuery snipped.

    First we need to replicate the Roost notification bubble and append it to the menu bar:

    function clone_roost_bubble() {
        ?>
       <script type="text/javascript">
        jQuery(function($) {
            setInterval(function() {
    			$( "#goroost-bell g" ).clone().addClass('copied-roost').appendTo( ".mega_main_menu" );
            }, 500);
        });
        </script>
        <?php
    }
    add_action('wp_footer', 'clone_roost_bubble');

    Added to your current theme's functions.php file it should create a copy of that bubble that would appear right after the "Intern" menu element. If this works for you, you should be then able to add some simple CSS styles to the ".copied_roost" class to adjust its look.

    Could you please give it a try and let me know if it worked for you?

    Best regards,
    Adam

  • Twelvesix

    Hi Adam,

    thanks for your help here. I added the code to the functions php but the bubble did not appear.
    you can check it out on firefox as the code is still in the file.
    Any ideas? Also why we are at it, I would like to translate the following elements as in the screenshot within the Notification bar into German but I can't find the source to replace the English text.
    Do you have a hint where that english text resides ?

    "NOTIFICATIONS"
    "CLEAR ALL"
    "1 DAY AGO"

    Thanks

  • Predrag Dubajic

    Hi Twelvesix,

    I tried checking this but the notification is not showing for me even in Firefox, did you perhaps disable this and if yes can you enable it back so we can have another look at it?

    As for the translation, if the plugin is translation ready you can use our Ultimate Branding plugin and its Text Change module to translate those strings.
    https://premium.wpmudev.org/project/ultimate-branding/

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.