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

    Howdy,

    this might be a weird request, but essentially I want to move the social icons (Twitter, Facebook) from where they are, to where I have the telephone numbers on this page- http://www.jaguarselect.co.uk/

    #137671

    Hey,

    Edit header.php, find this code on line 95:

    if(strpos($headerS,'bottom_nav_header') === false) avia_social_media_icons($social_args);

    Cut it then paste it above this code:

    /*
    * display the theme logo by checking if the default logo was overwritten in the backend.
    * the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
    */
    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png', false, 'strong');

    You can adjust the position, using this:

    #header_main .social_bookmarks {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    right: 0;
    }

    Regards,

    Ismael

    #137672

    I searched header.php for that line, but it doesn’t seem to be there? I opened up the original theme in case I’d accidentally deleted it, but it doesn’t seem to there either?

    #137673

    Hey,

    My bad. I thought you’re using Enfold. Look for this code instead:

    $args = array('outside'=>'ul', 'inside'=>'li', 'append' => '');
    avia_social_media_icons($args);

    Cut it then place it after this code:

    /*
    * display the theme logo by checking if the default logo was overwritten in the backend.
    * the function is located at framework/php/function-set-avia-frontend-functions.php in case you need to edit the output
    */
    echo avia_logo(AVIA_BASE_URL.'images/layout/logo.png');

    Add this on your custom.css:

    #top .social_bookmarks {
    position: relative;
    z-index: 150;
    margin: 0;
    float: right;
    margin-right: 5px;
    top: 80px;
    }

    Regards,

    Ismael

    #137674

    Thanks Ismael – that seems to have put them where I want them! However, they are completely invisible until I hover over them now, instead of the icon filling in with color as it did in it’s previous location?

    #137675

    I think this issue is related to the background color. Try to insert following code into the quick css field

    #top .social_bookmarks li a {
    background-color: rgba(255,255,255, 1) !important;
    }

    You can also set a different background color or opacity value – use following tool to generate the rgba color: http://hex2rgba.devoth.com/

    #137676

    Perfect! Visible, and in the right place. Just one last though – is there any way to have space between the social icons? I tried adding padding and margin, but both just stretch the outer circles.

    #137677

    Hey,

    You can use this:

    #top .social_bookmarks li {
    margin-left: 10px;
    }

    Re-position the social buttons again.

    Regards,

    Ismael

    #137678

    Perfect! Thank you very much for all the assistance.

    #137679

    Hey,

    Glad we could help. :)

    Cheers,

    Ismael

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

The topic ‘Moving the social icons?’ is closed to new replies.