Phone number

  • Posted in : Readme
  • Janec700
    Participant

    is there a way to make my phone number appear on the menu next to the social icons and the search icon.   Right now my menu bar has the social icons and the search icon on the right side.  I tried adding the phone number using the text widget but it looks funny and it overlapped with the social icons.  I want my phone number to always appear on the menu bar next to the social icons.  I would like the font for the phone number to be bolder and slightly bigger then the rest of text on the menu bar.  Is there a way to do this?  If you have a widget or some code you can share I would appreciate it.  Thanks.

    mehmetsali
    Keymaster

    Hi, you can try this code:

    <span class="phone-number" style="float: right; padding: 10px; font-weight: bold; font-size: 20px;">+1 888 255 55 55</span>
    

    See image:

    Result:

    Janec700
    Participant

    Thank you. It was so nice of you to share this code with me. I greatly appreciate it. I tried it and it works perfectly. The only problem is when I re-size the page to the size of an iphone the social icon moves to the second line and the phone number moves to the third row. It would be nice if the social share icon and the search icon could remain on the first row while the phone number moves to the second row. On another note, I switched to a text logo instead but it doesn’t make a difference. my logo was small to start with. thank you for your help.

    Janec700
    Participant

    or the social icon share and the phone number can be on the second row.

    Janec700
    Participant

    I turned off the search button in the social icon menu and I removed all the social media icons. I left the code for the phone number. now on the far right side of the menu the phone number shows up but when I resize it the social icon share button appears even though when you click on it there is nothing and as I stated I removed all the social icons like facebook, twitter, etc. How do I keep the social share icon from showing up?

    I would like to keep the social icons and the search along with the phone number if you can fix the appearance otherwise if you could please let me know how I can keep the social share icon from appearing. thanks.

    Janec700
    Participant

    one more thing the social icon share appears only when you resize the screen not in regular desktop mode.

    ahmetsali
    Keymaster

    Hi, can you provide your url?

    Eduardo
    Participant

    Hi,
    This topic was not mine, i found it while searching – but displaying the phone is essential for me.
    I used the code you provided, minus the font-size and bold formatting.
    The code works for desktop size, but when resizing the browser or using mobile devices, the menu is messed up.

    Please have a look at my test url: http://test.taijiquan.pro.br

    Thank you very much, i will be very grateful if you have a solution for mobile.

    Eduardo
    Participant

    Hi, can you help, please?

    ahmetsali
    Keymaster

    @anatman

    Hi, you can try this custom css code to fix mobile layout;

    @media screen and (max-width: 991px) { 
        span.phone-number {
            position: absolute; right: 104px; top: 3px; font-size: 12px;
        } 
    }
    
    Eduardo
    Participant

    Thank you Ahmet, this works great – i had to change max-width to 1065px, beacause my header menu is too wide.

    But now, also because my menu is too wide, I need one last fix for it to be perfect. How do i get the individual social links to collapse into the social menu when the browser window is smaller than 1065px? I tried fiddling with the social-toggle class, but it is above my small understanding of css.

    Eduardo
    Participant

    Hi Ahmet, any ideas? Thank you :)

    ahmetsali
    Keymaster

    Hi again, i just checked your site, and it seems fine, i guess you have sorted it out.

    Eduardo
    Participant

    Hi – yes, i think i have it sorted out. It took me quite a lot of trying, i’m not a programmer or designer – but since you checked, it must be ok!
    Here is the css in case other people need the same. The value “1065px” should be according for each person’s needs.

    @media screen and (max-width: 1065px) {
    span.phone-number {
    position: absolute; right: 104px; top: 3px; font-size: 12px;
    }
    .site-header .social {
    display: none;
    margin: 0;
    position: absolute;
    width: 53px;
    }
    .toggle-link {
    display:block;
    }
    .site-header .social li a {
    background: #fff none repeat scroll 0 0;
    }
    }

    Eduardo
    Participant

    thank you!

    ahmetsali
    Keymaster

    you are welcome, thanks for sharing the solution.

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register