Top Bar Plugin With Info & Social icons

I am using the Royal Theme on my site, however the header I've chosen doesn't allow the top bar feature. I want to have a text section to the left and social icons to the right.

I have looked for plugins but can't seem to find any without it just being a notification bar and also without a break at the top, I want it to be joined straight on to the top of my site.

Is there any plugins that can do this?

  • James Morris

    Hello Charlie,

    I hope you are well today.

    I do not have access to the Royal Theme, but I'm assuming you mean this theme -> http://preview.themeforest.net/item/royal-multipurpose-wordpress-theme/full_screen_preview/8611976

    Doing a quick search, I also didn't find too much that will add a topbar like what you are wanting. However, the beauty of WordPress is there's always several ways to do just about anything.

    What I would do in this situation is to register a custom widget area. You can learn more about that process in the following article: https://codex.wordpress.org/Widgetizing_Themes

    Basically, you would need to modify header.php to replace the navigation bar with your own custom widget area. Inside your widget area, you could add a text widget with a little bit of custom HTML. Something like so....

    <div id="my-header-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div><div id="my-social-links"><ul id="menu-social-items" class="social-menu"><li><a href="http://facebook.com/user77"><img src="http://mysite.com/uploads/social/Facebook.png" /></a></li>
    <li><a href="https://twitter.com/user"><img src="http://mysite.com/uploads/social/Twitter.png" /></a></li>
    <li><a href="https://instagram.com/user"><img src="http://mysite.com/uploads/social/Instagram.png" /></a></li>
    <li><a href="https://www.linkedin.com/in/user"><img src="http://mysite.com/uploads/social/LinkedIn.png" /></a></li>
    <li><a href="https://www.pinterest.com/user"><img src="http://mysite.com/uploads/social/Pinterest.png" /></a></li>
    <li><a href="https://www.youtube.com/user/user"><img src="http://mysite.com/uploads/social/youtube.png" /></a></li>
    </ul></div>

    And some custom CSS like so:

    #my-header-text{
    width:60%;
    float:left;
    margin:0;
    }
    #my-social-links{
    width:40%;
    float:left;
    margin:0;
    }
    #my-social-links ul#menu-social-items {
    list-style:none;
    }
    #my-social-links ul#menu-social-items li {
    float:left;
    margin: 0 1em;
    }

    Screenshot: https://monosnap.com/file/umWicwPdVP2iMgTEyg3vJjsmeknkDD

    I hope this clarifies a bit.

    Best regards,

    James Morris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.