How to show top bar phone numbers on mobile devices

[leozao]

Hello,

 

Is there a possibility to display the phone number from the top bar on the mobile devices? Actually only the links Contact and Sign in are appearing on mobile devices and phone number cannot be seen.

 

Thank you!

[daguilerastc]

Same problem here! (sorry about my poor english)

 

Prestashop set up to display:none if the width of device is down that 767px

 

you need change blockcontact.css:

.shop-phone {
  float: left;
  padding: 5px 0 10px;
  line-height: 18px; }
   @media (max-width: 767px) {
    .shop-phone {
      display: none; } }
  .shop-phone i {
    font-size: 21px;
    line-height: 21px;
    color: white;
    padding-right: 7px; }
  .shop-phone strong {
    color: white; }

Comment this lines:

  {* @media (max-width: 767px) {
    .shop-phone {
      display: none; } } *}

Ofcourse, you maybe want change the width in mobile devices:

 

#contact-link {
  float: right;
  border-left: 1px solid #515151; }
  @media (max-width: 479px) {
    #contact-link {
      width: 25%;
      text-align: center; } }
  #contact-link a {
    display: block;
    color: white;
    font-weight: bold;
    padding: 8px 10px 11px 10px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    line-height: 18px; }
    @media (max-width: 479px) {
      #contact-link a {
        font-size: 11px;
        padding-left: 5px;
        padding-right: 5px; } }
    #contact-link a:hover, #contact-link a.active {
      background: #2b2b2b; }

Change width for #contact-link:

 

width: 35%;

Better with width:auto; Edited August 14, 2015 by daguilerastc (see edit history)

[daguilerastc]

use href = tel : // +CONTRY+NUMBER in blockcontact.tpl shop phone and yours mobile device custumers will can click and call you

Edited August 14, 2015 by daguilerastc (see edit history)

[daguilerastc]

Sorry...

You can change this in your theme modules  blockcontact/nav.tpl

Edited February 16, 2016 by daguilerastc (see edit history)

[sman979]

Thank you very much daguilerastc! The css solution worked perfect. And I had been seraching for a way to the make phone numbers clickable.

Small deference in what I did. I changed only the yourtheme\modules\blockcontact\blockcontact.tpl

This change made all phone numbers on the page clickable. Nav/Header, Custom CMS Info Block & Footer.

I changed this line...

<span class="label">{l s='Phone:' mod='blockcontact'}</span>{$telnumber|escape:'html':'UTF-8'}

To this...

<span class="label"><a hre="contry+number"></a>{l s='Phone:' mod='blockcontact'}</span>{$telnumber|escape:'html':'UTF-8'}

using version 1.6.1.6

[castmrl10]

I need some Help with this http://tarheelfurnituregallery.com/ I lost all my ICONS I replace the awesome fonts and nothing..... It happened when I moved the logo turns the middle and making it bigger. I really don't know what to do.

 

If any one can help me also: I need to have the contact us telephone number for mobile device in the same area when is for desktop.

Thank you so much ahead.

[trevorgilligan]

Great, nice and simple.

I also like to use sms:// as well as tel:// and simple, but dont leave out mailto:

also contact info to be set to open as default , use this :

https://www.prestashop.com/forums/topic/5376[spam-filter]mobile-footer-store-information/

very helpful!