Add Phone Number to Header Area

Want to add a phone number to header area of your Sydney website? You can follow this simple steps:

Create a new Custom Links menu item to your current active menu in Appearance > Menus; enter your phone number to the Navigation Label box; to make it dial-able, enter tel:{phone number} to URL box.

Add this jQuery code with TC Custom JavaScript plugin.

;(function($) {

   'use strict'

   if( $('.phone-menu').length ) { 
    var phone = $('.phone-menu').html();

    $('.site-header .col-md-8').prepend('<div class="call-us">'+phone+'</div>');




Then add this CSS code to Additional CSS of your site (Appearance > Customize).

.menu .phone-menu {
  display: none;

.call-us {
  text-align: right;
  font-size: 30px;
  font-weight: bold;
  padding-right: 10px;

.call-us a {
  color: #ff0000; 

.call-us a:hover {
  color: #fff000; 

@media only screen and (min-width:768px) and (max-width:1024px) {
  .call-us {
    margin-right: -10px;

@media only screen and (max-width:767px) {
  .call-us {
    text-align: center;


Leave a Reply

Your email address will not be published. Required fields are marked *