Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1203690

    Hi,
    i would like to add in the header menu the FLAG Icon next to social media icons with a link to english version of my web site
    Is it possibile?
    How can i do this?
    My site is http://www.secondome.org

    thank you.
    Marco

    #1204315

    Good morning,
    could you please help me with my topic?

    Thank you
    Marco

    #1204742

    Sorry if i come back to write you but i really need your hekp for my tipic.
    Could you plese halp me?
    I saw others topica but i didn’t undestand where i must put the code in css and functions.php.

    i’m waiting foe you answer soon.

    thank you
    Marco

    #1205111

    Hi,
    Sorry for the late reply, the easiest way to add a FLAG Icon next to social media icons is to use one of the social profiles you would not normally use and add a link to your page and then use some css to replace the icon with a flag.
    Here is an example of css that changes your Instagram icon to a flag:

    #top #wrap_all .av-social-link-instagram a:before{
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    background: url(https://img.icons8.com/officexs/16/000000/great-britain.png) no-repeat center center;
    background-size: contain;
    }
    #top #wrap_all .av-social-link-instagram:hover a {
        color: #fff;
        background-color: transparent !important;
    }

    You can try this out by adding this to your Enfold Theme Options > General Styling > Quick CSS field
    Notice that the css is targeting this class .av-social-link-instagram each social icon has a similar class, so it’s just a matter of targeting the social icon that you use.
    Then I imagine you will also want to change the title that shows when you hover over the icon, so add this code to the end of your functions.php file in Appearance > Editor:

    function change_flag_title(){
      ?>
      <script>
    (function($){
      $(document).ready(function(){
    $('.av-social-link-instagram a').attr('title','English Language')
    });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'change_flag_title');

    just change the .av-social-link-instagram to the social icon class that you use.
    If you continue to have issues please include an admin login in the Private Content area so we can assist.

    Best regards,
    Mike

    #1205195

    Thank you very much Mike for your feedback it’works pefectly.
    Just two more questions:
    – I would like to add the social bar inside the burger menu how can i do it ?
    – I would like to add another flag – russian flag, how can I do it?

    In private my credentials to log in on my web site.

    Thank You
    Marco

    #1205201

    Hi,
    To add another flag, you would add another social icon that you don’t plan on using and adjust the steps above to suit.
    To add the social icons to the mobile menu, please follow these steps.

    Best regards,
    Mike

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