Add text within main menu?

HI there, I’d like to add out phone number between the logo and the menu links in the main menu in the header area. Is this possible and if so, could you provide some help in achieving this? Site is http://invictalinux.co.uk/
Many thanks!

Hello there,

To achieve it, 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 phone = '123';
      $('.site-header .col-md-4.branding-container').append('<span class="header-phone">'+phone+'</span>');

    });

4 . Update
5. Add this extra custom CSS code to Appearance > Customize > Additional CSS from dashboard.

    .site-header .col-md-4.branding-container {
      position: relative;
    }

    .site-header .header-phone {
      position: absolute;
      top: 40%;
      right: 0;  
    }

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

      .site-header .header-phone {
        -webkit-transform: translateX(-50%);
      	-moz-transform: translateX(100%);
      	-ms-transform: translateX(100%);
      	-o-transform: translateX(100%);
      	transform: translateX(100%);    
      }
      
    }

Regards,
Kharis

Hi there Kharisblank, many thanks fro your help with this and apologies for the delay in getting back to you. The code worked but the telephone number is not in line with the logo or the menu. Is there a way of sorting this out, please?
Many thanks

Hello there,

Please add the below extra CSS code:

    .site-header .header-phone { 
      margin-top: -10px;
    } 

Regards,
Kharis

1 Like

Marvellous, many thanks Kharisblank, the code worked perfectly!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis