Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • December 12, 2015 at 12:03 am #551312
    robphat

    See http://www.lapolla.com/

    I need to add the phone number in large font to the right of the logo, on the other side of the screen. I have done this before by adding <div style=”float: right;”>PHONE NUMBER</div> in the header.php file, but I can’t seem to find where I need to add it in this theme so that it goes directly across from the logo. I will use css to style it large, but I need to know where to put the html for it first.

    Can you please tell me where, and for future theme updates, allowing us to place the phone number in large font in the header would be great, as that is a must have for local business.

    Thanks,
    Rob

    December 12, 2015 at 1:50 am #551332
    Elliott

    Hey robphat!

    Try this out, http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/, and let us know when your done and we’ll give you some CSS to use.

    Best regards,
    Elliott

    December 12, 2015 at 7:30 pm #551466
    robphat

    Very nice. That worked perfectly. I changed the css to display the widget content to the left of the header, and padding the top to push it down some. See http://www.lapolla.com/lapolla-spray-foam-insulation-roof-products-rigs-equipment/

    But the content of the additional widget (a phone number in this case) looks very bad on mobile, so I’ve hidden in on mobile via custom css for now. But how can I keep it, but push it into a second header row on mobile, so that it is beneath the logo and menu button on mobile?

    December 14, 2015 at 6:45 pm #552551
    robphat

    On second thought, I like the way I have it now. I hide the new header widget on mobile, and css the phone number in top bar to be a button on mobile. That looks nice.

    But I just saw another problem with the header widget. It doesn’t respond the same way as the logo when you scroll down. The logo gets smaller to fit in the reduced height of the header after scrolling, but the content of the header widget does not.

    So what css do I need to make the content of the header widget respond like the logo when you scroll into the reduced header?

    Thanks,
    Rob

    December 16, 2015 at 2:08 am #553394
    Elliott

    Hey!

    Add this.

    .header-scrolled .textwidget p {
    font-size: 12px !important;
}

    Cheers!
    Elliott

    December 17, 2015 at 12:01 am #554078
    robphat

    Very nice, that worked perfectly on http://www.lapolla.com/ but for some reason, it’s not working on http://173.254.96.214/~thecfrgc/

    The css is the same on both (unless I’m missing something), but it’s not working on http://www.lapolla.com/. The header widget text doesn’t resize when scrolling. Can you please see where I went wrong.

    Thanks,
    Rob

    December 17, 2015 at 8:55 am #554262
    Rikard

    Hi,

    Because you’ve used a span instead of a paragraph there: 

    .header-scrolled .textwidget span {
    font-size: 12px !important;
}

    Regards,
    Rikard

    December 17, 2015 at 5:35 pm #554539
    robphat

    Ah. I see what I did. I corrected it. See http://173.254.96.214/~thecfrgc/

    December 21, 2015 at 7:17 am #555774
    Ismael

    Hey!

    Great! Glad you fixed it. :)

    Regards,
    Ismael

    December 21, 2015 at 4:12 pm #555997
    robphat

    me too. thanks for your help!

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Add large phone number to float right of logo’ is closed to new replies.