Okay
  Public Ticket #203274
Phone Number on Header
Closed

Comments

  • Diego started the conversation

    Hi Nectar,

    I would like to add a phone number "(800)888-8888 Need Help? Call Us!" to the header. 

    Initially I wanted to set it above the navigation bar, but that doesn't seem possible. Then I read on the threats that I could place it in the secondary navigation bar and disable the link, which I could. However, it would be too small for my purposes. 

    What would you recommend? Can the text in the secondary nav larger? Or if you have another suggestions, please let me know. Thank you

  •  8,839
    Tahir replied

    Hey Diego!

    Can you please provide your site url so i can maybe provide you some custom code. 

    Thanks


    ThemeNectar Support Team 

  • [deleted] replied

    I too would like to put a phone number above the main navigation area. What was the solution?

  • [deleted] replied

    Since this will never get posted otherwise and many other people have searched for the same thing ... I'll post my working hack.

    First go into the php header file ... and put a div in there

    <nav>
    <ul>
    <div id="phone" style='text-align:right;'>
    <BR>CALL 123-456-7890
    </div>
    <?php 

    Then call the div id from the custom css like this:

    /*Freakin phone number*/
    #phone {
        width: 100%;
        height: 40px;
        position: absolute; top: 0; left: 0;
        vertical-align: middle; outline: 0; padding: 0; margin: 0;
        border: 0; padding-right:65px;
        z-index: 1;
        margin-left:auto; margin-right:50; margin-top: 5px;
        font-family: "Helvetica Neue", Arial, sans-serif!important;
        font-size:18px; color:#000000;}

    It's a nasty hack but it works for now.

  • Diego replied

    Ian, thanks for the hack. I have not tried it, however. Would you mind sharing a link to see how it looks?

    Tahir, I have been doing a lot of changes recently to my website and I would like to reopen this ticket.

    Here's the website: www.myblindstoday.com

    I would like to 

    -change the font and increase the size

    -center it like a banner, if possible? 

    - change the background color, if possible?

    I appreciate both your input. Thank you.

  •  8,839
    Tahir replied

    Hey Again!

    i am afraid it cant be centered . For the other mods add this into the Custom CSS box located in your Salient Options panel :

    body #header-secondary-outer nav > ul > li#menu-item-3068 > a {
        background-color: #ff0 !important;
        font-size: 14px !important;
        font-family: OpenSansRegular;
        line-height: 12px !important;
    }
    
    
    

    Thanks



    ThemeNectar Support Team 

  • Diego replied

    Hi Tahir, I appreciate your response. 

    I imagined centering it would be too much, I understand.

    Is there a way to change the whole secondary navigation background color instead of just the section as well as the font size? Otherwise it looks weird.

    Please, take a look again: www.myblindstoday.com

    I have removed the background line for now, and just changed the font size and I tried to add an icon as well but didn't work. How can i do that?

    I see alert messages on each line at the custom CSS box-- but code you gave me works, so should i just ignore the alert messages?

    Thank you, sir.

  •  8,839
    Tahir replied

    Hey!

    Please remove the earlier css and add this instead: 

    body #header-secondary-outer nav > ul > li#menu-item-3068 > a i {
        font-size: 23px !important;
        padding-top: 1px !important;
    }
    
    
    body #header-secondary-outer nav > ul > li#menu-item-3068 > a {
        padding-top: 1px !important;
        padding-bottom: 0px !important;
        font-size: 21px !important;
        line-height: 22px !important;
    }

    Thanks


    ThemeNectar Support Team 

  • Diego replied

    Thank you. It looks so much better. 

    How can I make the other items on the secondary navigation item match the font size? In other words, if you see the link www.myblindstoday.com you'll see the word translate (which I still have to fix to display a dropdown) is of a smaller font than the phone number, and so are the social icons on the left. Please, advise.

  •  8,839
    Tahir replied

    Hey Diego!

    Add this into the Custom CSS box located in your Salient Options panel :
    html body #header-secondary-outer nav > ul > li > a {
        padding-top: 3px !important;
        padding-bottom: 0px !important;
        font-size: 21px !important;
        line-height: 26px !important;
    }
    
    
    html body #header-secondary-outer #social li a {
        font-size: 21px !important;
    }
    html body #header-secondary-outer #social i {
        font-size: 18px !important;
    }
    Thanks


    ThemeNectar Support Team 

  • Diego replied

    This is great, thank you!