If you have troubles since the update to WordPress 4.5 please read this post before opening a new thread.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #341

    Hi …

    I want to put language flags to the right top of the screen and link the flags to the other language web sites …

    How can I do this ?



    In header.php you’ll find this code:

    <div id="head">

    <h2 class="logo <?php echo $logoclass; ?>"><a class='ie6fix' href="<?php echo get_settings('home'); ?>/"><?php echo $logo; ?></a></h2>

    <!-- Navigation for Pages starts here -->

    Relace it with:

    <div id="head">

    <h2 class="logo <?php echo $logoclass; ?>"><a class='ie6fix' href="<?php echo get_settings('home'); ?>/"><?php echo $logo; ?></a></h2>

    <ul class="social_bookmarks">
    <li class='flag_1'><a class='ie6fix' href="link-to-first-website.html" >Language 1</a></li>
    <li class='flag_2'><a class='ie6fix' href="link-to-second-website.html">Language 2</a></li>

    <!-- Navigation for Pages starts here -->

    Then you need to define your “flag images” in css and adjust some things (maybe increase header height, etc.)

    Example css code – write it into style1, style2 or style3 (depending on the style you’re Avisio running with:

    .social_bookmarks .flag_1 a{background: transparent url(../images/shared/flag_1_16.png) 0 0  no-repeat;}
    .social_bookmarks .flag_2 a{background: transparent url(../images/shared/flag_2_16.png) 0 0 no-repeat;}

    The Dude


    Thanks dude I will try now and let you know …

    Great support


    Man that worked awsome…

    Thank you


    Dude there is a problem with the icons that, when you rollover the flags it doesnt turn to hand cursor … and it becomes hand cursor when you rollover 10pixels down of the flags …

    What can I do ?


    Try to add an z-index value – it looks like an other element is overlapping you flags. Try this code:

    .social_bookmarks .flag_1 a{
    background: transparent url(../images/shared/flag_1_16.png) 0 0 no-repeat;
    .social_bookmarks .flag_2 a{
    background: transparent url(../images/shared/flag_2_16.png) 0 0 no-repeat;



    Add this to the end of style.css:

    #top .nav { height: auto !important; }

    The navigation is overlapping the flags so they can’t be clicked on.

    Best regards,




    i’ve used your recipe for adding 2 flags in 16×16 px and it works great.

    I wondered if it would be possible to make the same with flags which are 32×32 ?

    (i find the 16×16 a bit small)




    The size of the flags doesn’t matter. Both solutions (z-index or !important) should work.

    The Dude

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

The topic ‘Add language flags + links to top right ?’ is closed to new replies.