Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 14, 2014 at 12:54 am #278771
    freshwebsitesla

    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

    June 14, 2014 at 6:06 am #278822
    Josue

    Hi Mike,

    Can you post the link to your website please?

    Have you tried this settings?

    Regards,
    Josue

    June 18, 2014 at 10:20 pm #280807
    freshwebsitesla

    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

    June 18, 2014 at 10:42 pm #280819
    Josue

    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

    June 18, 2014 at 10:46 pm #280823
    freshwebsitesla

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

    http://newsite.custommadeproductions.com/

    Mike

    June 18, 2014 at 10:48 pm #280826
    Josue

    Did you apply the CSS?

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

    Regards,
    Josue

    June 18, 2014 at 10:50 pm #280830
    freshwebsitesla

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

    Thanks

    June 18, 2014 at 10:59 pm #280834
    Josue

    Here is how i see it on smaller screens:
    http://screencast.com/t/ABBMHrXr

    Regards,
    Josue

    June 19, 2014 at 12:41 am #280880
    freshwebsitesla

    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

    June 19, 2014 at 3:00 am #280911
    Josue

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

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

    Cheers!
    Josue

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.