Add phone number on top of menu and should be resp

Question

The wordpress theme I'm using is this one: https://wordpress.org/themes/total/

My website is http://www.kalimataxiservice.com/

I just want to add two phone numbers on the right side of this theme like this:

Desktop:

Mobile:

I used this html but not work: <div class="contact-phone"><i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:[phone]">[phone]</a><br> <a href="tel:[phone]">[phone]</a></div>

I used this css: .contact-phone { display:block; text-align: right; font-size: 24px; line-height: 1.6; font-weight: 400; font-family: 'Oswald', sans-serif; }

Answer 1

Ok let's do it

First, open your style.css and replace CSS with below code

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

open your functions.php and find the code below

function total_widgets_init() {

after this code add the new widget like this

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 turn to call widget into your header.php open it and find the code below it call your widget

          <div class="contact-phone">
                        <?php if(is_active_sidebar('total-head-mobile')): 
                            dynamic_sidebar('total-head-mobile');
                        endif;
                        ?>  
                    </div>

open your widget from the back and you will see there a widget with the name Header Phone drag a text box in it and add your phone no code

 <i class="fa fa-phone" aria-hidden="true"></i> <a href="tel:[phone]">[phone]</a><br>
<a href="tel:[phone]">[phone]</a>

init. check the screenshot http://prntscr.com/fgf24h and it will appear frontend like this: http://prntscr.com/fgf2km

OK for mobile please add this css to your style.css or if there any responsive directory file add there

@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 any you will face any problem adding the comment below.

Thanks