Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #187070


    i would love to add social icons to the right of my main nav as per your site.

    i’m currently using a small non-fixed header.
    i don’t like the layout of the other options – especially when it creates a 2nd nav.

    website –




    Hi jazbird!

    Unfortunately Kriesi’s child theme layout/customizations aren’t available without customizing them yourself right now. He will be releasing some tutorials down the road for how he did some of theme and others he’ll include with the theme in a future update.

    We aren’t however able to assist in making the same customizations.



    ok… thanks.

    but can u add an icon to the main nav? or is it only text?




    You can edit header.php, find this code on line 183:

                                * Hook that can be used for plugins and theme extensions

    Above it, add this code:

    echo avia_social_media_icons($social_args);

    Go to Enfold > Styling > Quick CSS then add this code:

    #header_main .social_bookmarks {
    position: absolute;
    top: 20%;



    Hi there,

    First, I LOVE the Enfold Theme for my photography site! Thank you for creating it! It’s absolutely amazing.

    I’ve got 2 questions regarding social media icons in the top nav:

    1. How do I replace the icons with my own custom icons?
    2. When viewing the site on a mobile device like an iPhone or Android, the social media icons overlap the nav links. How do I fix the formatting so it doesn’t look jumbled on the handheld device? I have limited coding ability, but I can figure stuff out.


    • This reply was modified 4 years, 1 month ago by  jordandsa.


    For #1, you can watch this video:

    The fonts have to be in the same font format as the ones from fontello however.

    For the social icons, you’ll need to add additional alignment with css to the media query in your custom.css file. There are two provided as an example, one for desktop only and the other for mobile only.



    Hey Devin,

    Thanks so much for your response. I am aware of the icon font manager, however, I apologize for not being clear. I would like to use an actual custom image/logo, not a fontello font or other type of icon font. Is there a way to replace the icon font in the nag with just an actual .jpg or .png file? And will I be able to have them display properly on mobile devices?

    To that question of mobile display, I saw in the custom css file the examples you refer to, but I’m not sure what I need to do. Do I need to write css for mobile viewing myself? If so, can you direct me to where I can find code snippets, as I am entirely not proficient in writing my own code. I’m great at copying and pasting, however ;)

    Thanks so much,


    hi ismael…

    sorry for late reply… i tried this and it’s not working?

    this is the header.php code i edited… and i added the css code but nothing?
    any ideas…?

    echo avia_social_media_icons($social_args);
    echo ‘</nav>’;


    do i need ti select a certain header type for it to work? i’m using small fixed header now…


    No, Ismael’s code doesn’t require any specific heading. It forces the output into the header with any heading type if done correctly. Just make sure you are adding in the code exactly and where specified.

    To get the exact same header will require a freelance developer. We have been asked by Kriesi *not* to provide the customizations he has done to his child theme as he would like to keep his customization separate for now.


    thank you!
    i obviously put it in the wrong spot first time…



    Glad we could help. :)

    Best regards,

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

The topic ‘adding social icons like the Kriesi site with a small non-fixed header’ is closed to new replies.