Alright, let's get started!
To begin, navigate to your style.css file and replace the existing CSS with the code snippet below:
#ht-site-navigation {
float: left;
padding: 27px 0;
transition: padding 0.3s ease 0s;
width: 47%;
}
.contact-phone {
display:block;
text-align: right;
font-size: 24px;
line-height: 1.6;
font-weight: 400;
font-family: 'Oswald', sans-serif;
float: right;
}
Next, open your functions.php file and locate the following code:
function total_widgets_init() {
Add the new widget after this code like so:
register_sidebar( array(
'name' => esc_html__( 'Header Phone', 'total' ),
'id' => 'total-head-mobile',
'description' => __( 'Add widgets here to appear in Phone not on header.', 'total' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h4 class="widget-title">',
'after_title' => '</h4>',
) );
Now, go to your header.php file and find the code block below where you should call your widget:
<div class="contact-phone">
<?php if(is_active_sidebar('total-head-mobile')):
dynamic_sidebar('total-head-mobile');
endif;
?>
</div>
In the widget section at the back end, locate the "Header Phone" widget and add your phone number.
<i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:+91-9996320362">+91-9996320362</a><br>
<a href="tel:+91-8708558959">+91-8708558959</a>
For a visual reference, check out the screenshot here. Your frontend display will look like this: here.
If you're optimizing for mobile, add the following CSS to your style.css or any responsive directory file:
@media only screen and (min-width: 320px) and (max-width: 767px) {
#ht-site-navigation {
padding: 0;
}
.contact-phone {
position: relative;
z-index: 999;
}
#ht-site-branding {
float: left;
width: 100%;
}
}
If you encounter any issues, feel free to leave a comment below.
Thank you!