Customization X button

Hi,

Please add the following to the bottom of Functions.php file of your child theme ( https://kriesi.at/documentation/enfold/child-theme/ ) or as a new snippet using the Code Snippets ( https://wordpress.org/plugins/code-snippets/ ) plugin:

add_action('ava_after_main_container', 'new_ava_after_main_container');
function new_ava_after_main_container(){
	if(is_page(8779)){
		echo '<div class="custom-back-button"><span class="av_font_icon av-lm7ig98k-65ba33b015b6384fd3901ea03a4bd5d6 avia_animate_when_visible av-icon-style- avia-icon-pos-left av-no-color avia-icon-animate avia_start_animation avia_start_delayed_animation"><a href="LINK_TO_YOUR_HOMEPAGE" class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></a></span></div>';
	}
}

You can use the “is_page” condition to target your Boats page. The “8779” is ID of the page you shared in your initial post. If you want to display the button on another page, you’ll need to update the “8779” in the code.

Then, you’ll need to update the “LINK_TO_YOUR_HOMEPAGE” in the snippet to the link of your homepage.

After that, add the following code to the bottom of the Quick CSS field in Enfold theme options > General Styling

.custom-back-button {
  position: fixed;
  top: 50px;
  left: 20px;
  z-index: 99;
  background-color: #1a1a1a;
  opacity: 0.7;
  padding: 90px 30px 40px 30px;
}

.custom-back-button .av_font_icon {
font-size: 80px;
margin: 0;
}

You’ll need to use jQuery to hide/display the button when scroll down/up.

We cannot help you fine-tune this. If you need further assistance, please consider to hire a freelance developer for the task.

Best regards,
Yigit

Hi,
Please try Yigit’s suggestion, please note that he said: We cannot help you fine-tune this. If you need further assistance, please consider to hire a freelance developer for the task.

Best regards,
Mike