Can I add a Phone Number in the top left of the desktop site?

Discussion in 'Harrington- A WordPress Business Theme.' started by lucentpools, Oct 29, 2014.

  1. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    I was wanting to add the business number to the header that is clickable to a ringme url.
     
  2. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    I meant top right of the header.
     
  3. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
  4. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    We have already used this functionality for mobile view in this theme.

    Thanks & Regards
    Yogesh Bhade
     
  5. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    So is it not possible to have the same functionality on the desktop site?
     
  6. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    We can show that call button in desktop view, but when the button click it will not ring you.

    Thanks & Regards
    Yogesh Bhade
     
  7. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    I have a ringme url from ring central that I can link the number with. I just need to know how to get the number up there on the desktop site and where its code is located so I can insert the link.
     
  8. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Paste the code given below in Custom CSS section to display Tap to Call button in Desktop view.
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    .call-us a.btn {
    background: url(images/tap-to-call.png) no-repeat;
    display: inline-block;
    visibility: visible;
    font-size: 0px;
    width: 284px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    text-indent: 99999px;
    margin-left: 98px;
    margin-top: 20px;
    }
    It will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  9. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    I inserted the code above and it didn't add the call button. Below is a before and after screen shot on what is does after I add the code. Thank you!
    lucentphonebeforecode.png lucentphoneaftercode.png
     
  10. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Paste the code given below in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    a.btn {
    background: url(http://lucentpools.com/wp-content/themes/harringtontheme/images/tap-to-call.png) no-repeat;
    display: inline-block;
    visibility: visible;
    font-size: 0px;
    width: 284px;
    height: 50px;
    margin: 0 auto;
    text-align: center;
    cursor: pointer;
    text-indent: 99999px;
    margin-left: 98px;
    margin-top: 20px;
    }
    It will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     
  11. lucentpools

    lucentpools Member

    Joined:
    Oct 16, 2014
    Messages:
    37
    Likes Received:
    0
    I have inserted the code above and it places the call button below my menu. I have attached a screenshot. I was wanting it above the menu and to the right side. Thank you.
    phonescreenshot.png
     
  12. Yogesh

    Yogesh Guest

    Joined:
    Aug 8, 2014
    Messages:
    2,052
    Likes Received:
    41
    Hello,

    Paste the code given below in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.
    Code:
    .header {
    position: relative;
    }
    a.btn {
    position: absolute;
    top: -5px;
    right: 0;
    }
    @media only screen and (max-width: 767px){
    .call-us a.btn {
    position: inherit;
    }
    }
    It will resolve your issue.

    Thanks & Regards
    Yogesh Bhade
     

Share This Page