Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #278771

    Hi Guys,

    Need some help with adding some text content to the enfold header area.

    Using Transparent Header with Centered Logo and Menu Below.
    Social Icons in the Header Right Area.

    I would like to move the social Icons to the area on the left and add a tagline or phone number to the same area on the right.

    Is this possible and east to accomplish?

    Thanks gain for your help.

    Mike
    Screen Shot

    #278822

    Hi Mike,

    Can you post the link to your website please?

    Have you tried this settings?

    Regards,
    Josue

    #280807

    Josue,

    Yes tried the built-in options but dont really want to use the top bar. What I want is a small text widget or area to the left of the logo to match the location of the social Icons on the right,

    Or if that Cant be done. Would love to put a Phone number and Tagline under the social Icons.

    http://newsite.custommadeproductions.com/

    Thanks in advance.

    Mike

    #280819

    Hey Mike!

    Try adding this at the very end of your theme functions.php file:

    function custom_phone() {
    	echo "<div class='custom-phone'>23809023</div>";
    }
    add_filter('ava_after_main_menu', 'custom_phone');

    And this to the Quick CSS:

    .custom-phone {
        position: absolute;
        top: -40px;
        right: 0;
    }

    Cheers!
    Josue

    #280823

    Thanks. Looks like it needs some styling and it breaks the menu bar.

    http://newsite.custommadeproductions.com/

    Mike

    #280826

    Did you apply the CSS?

    .custom-phone {
        position: absolute;
        top: -40px;
        right: 0;
    }

    Regards,
    Josue

    #280830

    I think I got it. Just need yo add more padding when the menu shrinks.

    Thanks

    #280834

    Here is how i see it on smaller screens:

    http://screencast.com/t/ABBMHrXr

    Regards,
    Josue

    #280880

    Thanks. I had to clear my cache to see the CSS change. Looks good. Only funky part is when the header shrinks when scrolling and the padding between the icons and number is a little off. I’ll play with it and make it works.

    Thank you again.

    Mike

    #280911

    You can target the header when scrolled with the header-scrolled class:

    .header-scrolled .custom-phone {
    top: -28px;
    }

    Cheers!
    Josue

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

You must be logged in to reply to this topic.