Add text next to logo in header

How can I add a text right of the logo in the header?

http://da01.procespartners.nl/~abcbemmwp/

Hello there,

Please try doing these steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    jQuery(function($) {

      var text = 'My text goes here';
      $('.site-header .col-md-4').append('<div class="logo-text">'+text+'</div>');

    });

4 . Update
5 . Add the below CSS code Appearance > Customize > Additional CSS from dashboard.

    .logo-text {
      color: #fff000;
    }

    @media only screen and (min-width: 768px) {

      .site-logo,
      .logo-text {
        float: left;
      }

      .logo-text {
        margin-top: 40px;
        margin-left: 15px;
      }

    }

Regards,
Kharis

Hello Kharis,

I get the text displayed, but I want it to be to the right of my logo.
Now it’s beneath. Can this be changed?
[/uploads/db8325/original/2X/4/43fdaf40a3ddbc80490f35b42c73eb3cbad828aa.jpg]

Met vriendelijke groet,

Michiel Nijenhuis
ProcesPartners
Dorpsstraat 34a
6681 BN Bemmel
Telefoon: 0481 450 748
Mobiel: 06 250 636 88
Email: m.nijenhuis@procespartners.nlmailto:m.nijenhuis@procespartners.nl

Hello there,

Try applying this CSS code:

    .site-logo,
    .logo-text {
      float: left;
    }

    .logo-text {
      margin-top: 40px;
      margin-left: 15px;
    } 

If it doesn’t help, please keep all additional code I’ve suggested remains to allow me correcting it with the web browser’s developer tool.

Regards,
Kharis

Hello Kharis,

CSS has been added, but no success.
You can view this at: da01.procespartners.nl/~abcbemmwp/

Met vriendelijke groet,

Michiel Nijenhuis
ProcesPartners
Dorpsstraat 34a
6681 BN Bemmel
Telefoon: 0481 450 748
Mobiel: 06 250 636 88
Email: m.nijenhuis@procespartners.nlmailto:m.nijenhuis@procespartners.nl

Hello there,

For that long extra text, you should add the below extra custom CSS code:

    @media only screen and (min-width: 1025px) {
      .site-header .col-md-4 {
        width: 40%;
      }
      .site-header .col-md-8 {
        width: 60%;
      }  
    } 

Regards,
Kharis

I was reluctant to revive this old thread, but I feel like my question ties into this thread well and could put both answers together.

The first set of code in this thread that places text below the logo worked great for me, but I would like to use shortcode for that text. Shortcodes run on the server side and JS on the browser side…so what can I do to resolve this?