Place a small image/icon to fix position like (position like scroll-top-link)

Hi Kai!

Thanks for getting in touch with us!

Sorry but this will take more than a bit of CSS. In your WordPress installation please go to the footer.php file and find this code in line 190:

<a href='#top' title='<?php _e('Scroll to top','avia_framework'); ?>' id='scroll-top-link' <?php echo av_icon_string( 'scrolltop' ); ?>><span class="avia_hidden_link_text"><?php _e('Scroll to top','avia_framework'); ?></span></a>

and add this line above it:

<img class='custom_icon' src='http://www.yoursite.com/yourimage.png' />

Add the following to Quick CSS field to move the scroll to top image down and position your image above it:

.custom_icon {
    position: fixed;
    border-radius: 2px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-decoration: none;
    text-align: center;
    right: 50px;
    bottom: 5px;
    z-index: 1030;
}

#scroll-top-link {
    bottom: 5px !important;
}

Let me know if you need further assistance.

Best regards,
Jordan

Hi,

Since this is a live site I din’t wanted to add this code without an icon please replace the word “icon” in the below code to the icon image path and add it to functions.php

function custom_icon(){
?>
<script>
jQuery(window).load(function(){	
   jQuery("#scroll-top-link").html( "
<div id='custom-icon'>Icon</div>
" );
});
</script>
<?php
}
add_action('wp_footer', 'custom_icon');

To adjust the above icon on the front end please make change to the bottom and right values as required.

#custom-icon {
	width:50px;
	height:50px;
	background:gold;
	display:block!important;
	position:fixed;
	bottom:70px;
	right:50px;	
}

Request you to open different tickets for different issues.

Let us know if you have any questions.

Best regards,
Vinay

Hi,

Actually the code get’s auto indented here but i tested this on my installation and it works fine. Please make sure the underlined line is one line.

I tried to troubleshoot this issue but the login credentials you provided do not work for me. Would you mind checking once again and then send us working login credentials?

You can replace the word icon with and image :)

Let me know if you have any questions.

Best regards,
Vinay

Hey!

I have updated the code to suit the custom modification. You can see now the icon is above the other one…

You need to open Appearance > Editor > functions.php and at the bottom in the above code block replace the text “Icon 2” with URL to the image icon of your choice.

Best regards,
Vinay

Hi!

As i understand the aeroplane image on the bottom right should scroll to top when user clicks right? Please clarify if you want the yellow button next to the aeroplane needs to be removed?

Best regards,
Vinay

Hi!

I have updated the code in functions.php please review the site :)

Cheers!
Vinay

Hi,

All changes are updated please review the site :)

Best regards,
Vinay

Hi,

I think you have explained to me well and i have attached the screenshots. You may not see the same until the cached files are cleared in your browser.

Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

If this is not what you wanted please post us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

Best regards,
Vinay

Hey!

The login URL is not working for the new site.

To hide the default scroll to top icon add the below css

.avia_pop_class {
	display: none !important;
}

The plane icon will appear on the text while scrolling as it is a fixed element however it should not affect the readability as users can scroll the content.

If i move it below then it will be on top of social icons so i suggest to you to keep the plane icon in the current location :)

Best regards,
Vinay