Phone number in header?

Hello.
Is there a way to put contact info or just phone number in header, to go together with menu when I scroll the page. I’ve done it by putting phone as menu item, but I want it to be bigger and separated from menu. Is there any plugin or simple method that I can try?

Thank you for the beautiful theme.
Regards!

Have you tried adding this to your site title/tagline in customiser?
You could then make this static by adding custom CSS

.text-slider {
  -webkit-animation-name: none;
  animation-name: none;
}

Or you could add this to your footer - use a child theme if possible.

Hello there,

Thank you for asking. @babyworldandme thanks for helping.

There is a better alternative you can try to achieve it.

  1. Go to menu administration panel to assign a custom class name to your phone menu which will be used for jQuery code selector to move its position and look. The class name option is hidden by default, to display it, expand the screen options at the top right side, then enable the “CSS Classes” option.

  2. Edit your phone menu item. In the CSS Classes input field, enter phone-menu

So it should look like this:

Cloudup

  1. To separate it from your menu navigation, you need to apply the following jQuery code:

;(function($) {

   'use strict'

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

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

  }

})(jQuery);

Use the TC Custom JavaScript and insert the code into Appearance > Custom JavaScript.

  1. To style its alignment and look, apply the following custom CSS code into Appearance > Customize > Additional CSS.

.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;
  }
  
}


  1. Now you can check the result.

Note: The pro version of Sydney has an easier way to insert phone number in the header area, which can be done through Appearance > Customize > Extra options > Header contact info. It also has some other extra features you can take benefit from including WooCommerce compatibility. If you’re interested to upgrade, check this page.

Regards,
Kharis

Beautiful. Thanks very much!

You’re most welcome here!

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