Hi,
This was an error because you added the snippet as a “HTML Snippet”:

I changed it to a “PHP Snippet” for you

please clear your browser cache and check.

Best regards,
Mike

Hey Stilecatalini,
I carefully examined your site and came up with a way to center your logo for all device sizes and for it to show in the same place when the menu is open.
This is the logo before the menu is open:

and this is with the menu open the logo shows in the same place:

Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function show_logo_in_burger_menu() { ?>
  <script>
(function($){
$('#avia-menu').one('click', function(){
jQuery('.logo.avia-standard-logo').clone().wrapInner('<div class="burger-logo"/>').children(0).unwrap().prependTo('#av-burger-menu-ul');
});
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'show_logo_in_burger_menu', 99);

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 990px) { 
	.logo.avia-standard-logo,
	.logo.avia-standard-logo a {
		display: flex;
	    justify-content: center;
	    width: 100%;
	    align-items: center;
	}
	.av-burger-overlay-active .burger-logo {
		top: 30px;
	    position: absolute;
	    justify-content: center;
	    display: flex;
	    width: 100%;
	}
}
@media only screen and (max-width: 989px) {
	.responsive #top .logo {
		width: 100%;
		display: flex;
		justify-content: center;
        align-items: center;
	}
	.responsive #top #wrap_all .main_menu,
	.responsive #top #wrap_all .av_mobile_menu_tablet .main_menu {
    	top: 11px;
    	height: 55px;
	}
	.av-burger-overlay-active .burger-logo img {
		height: 30px;
    	max-height: 30px;
    	width: 155.17px;
	}
	.av-burger-overlay-active .burger-logo {
		top: 25px;
	    position: absolute;
	    justify-content: center;
	    display: flex;
	    width: 100%;
	}
}
@media only screen and (min-width: 768px) and (max-width: 989px) { 
	.responsive.html_header_transparency.html_header_top #top #main {
    	margin-top: -70px;
	}
	.responsive #top .logo {
    	height: 80px !important;
	}
}

Best regards,
Mike

Hi,
Thank you for your patience, I see that you are using the Code Snippets plugin so I will add the customizations in it,
I also see that you are using the heading setting Logo left, menu below, I disabled the Shrinking Header because it didn’t give enough room for the search box. The following code will only show the search bar on screens larger that 990px when there is enough room.
So first I added the function to add the widget to the header as a code snippet:

add_action( 'ava_main_header', 'enfold_customization_header_widget_area' );
function enfold_customization_header_widget_area() {
dynamic_sidebar( 'header' );
}

Then the custom header widget with a search widget:

then I added this code to place the widget after the logo in the header:

function header_widget_placement() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var width = $(window).width();
    if ((width >= 990)) {
   $('#header_main .widget').detach().insertBefore('.av-logo-container .inner-container #menu-item-shop');
    } else {}
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'header_widget_placement', 99);

then this css to style and order the header elements:

@media only screen and (max-width: 989px) {
	#header_main > .widget {
	display: none;
}
}	
@media only screen and (min-width: 990px) {
.av-logo-container .inner-container {
	display: flex;
    flex-direction: row-reverse;
}
.av-logo-container .inner-container .widget {
	display: flex;
    order: 3;
    flex-basis: 65%;
}
#header_main > .widget {
	display: none;
}  
.av-logo-container .inner-container .widget #searchform {
	 width: 100%;
}
.av-logo-container .inner-container .widget #searchform .ajax_search_response {
	background-color: #fff;
    z-index: 3;
}
.av-logo-container .inner-container #menu-item-shop {
	display: flex;
    order: 2;
}
}

This is the final result:

Best regards,
Mike

Hi,
To move your account & search menu items next to the cart icon:

this is only needed for screens larger than 990px, because on mobile it’s already next to the burger menu:

Add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 990px) { 
.account-menu {
    position: absolute;
    z-index: 3;
    height: 46px;
    right: 0;
    width: 150px;
    line-height: 46px;
    text-decoration: none;
    text-align: center;
    top: 38%;
    margin: -23px 0 0 0;
}
.account-menu .cart_dropdown {
	top: 85%;
}
.account-menu #menu-item-wc-account-icon {
	display: inline-block;
    height: 46px;
    width: 46px;
    float: left;
}
.account-menu #menu-item-search {
	display: inline-block;
    height: 46px;
    width: 46px;
    float: left;
}
.account-menu .menu-item-account-icon a {
	line-height: 46px !important;
	width: 46px;
    height: 46px !important;
    display: inline-block;
}
.account-menu #menu-item-search a {
	line-height: 46px !important;
	width: 46px;
    height: 46px !important;
    display: inline-block;
}
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_account_search_nexto_cart() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
	var width = $(window).width();
	if ((width >= 990)) {
 $(".menu-item.cart_dropdown ").wrapAll("<span class=account-menu></span>");
 $('#avia-menu #menu-item-wc-account-icon').detach().insertBefore('.account-menu .cart_dropdown');
 $('#avia-menu #menu-item-search').detach().insertBefore('.account-menu .cart_dropdown');
	} else {}
})(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'move_account_search_nexto_cart', 99);

this is the expected results:

Best regards,
Mike

Hi,
Thank you for your patience and the password to your site but I don’t see a user name, please include.
I see the [avia_search] shortcode in your topbar, it looks like you have not added the code to the end of your child theme functions.php file in Appearance ▸ Editor: add_shortcode('avia_search', 'get_search_form'); or if you did the symbols may be converted, please ensure to copy the code from the forum and not an email notification so the symbols are not converted. You said that you are using SearchWP, did you add the code for it to be the search for your site? And doesn’t it have it’s own shortcode, this page explains how to adjust the SearchWP shortcode for the options you want, you should end up with something like this: [searchwp_search_form engine="default" var="searchvar" button_text="Find Results"] (this code may not work on your site, follow the instructions)
Your asking for a Amazon search bar, have you thought about adding a larger one like in our Knowledge Base Demo below your menu? We have a search bar element:

that will allow you to adjust the style better it you want a big search bar like on Amazon.

Best regards,
Mike

Hey CJGVD,
Thank you for your patience, in your grid row element example it look like to have added an image element inside of the grid element, instead try adding the image as a background image to the grid and set the Background Image Position as center center

on my test page I set each grid row element as 50% of the height and the image fills the cell size:

the only issue is the when the grid becomes a single column at mobile the cells with the background image have no content so the height doesn’t match as the equal height is not applied:

To correct I added the custom class equal-height-mobile-grid to the grid row elements, my test page has three:

and added this code to the end of my child theme functions.php file in Appearance ▸ Editor:

function grid_row_elements_equal_height_for_mobile() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
  	if (width < 767) {
    $('.equal-height-mobile-grid').each(function(){  
     var $columns = $('.flex_cell .flex_cell_inner',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.attr('style', 'height: '+ maxHeight +'px !important');
  });
  	} else {}
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'grid_row_elements_equal_height_for_mobile', 99);

and now on mobile the image cell is equal height:

Please give this a try.

Best regards,
Mike

Hi,

Thank you for reporting this. Something we have completly missed.

For next release I will add a fix for this in av_video_assets_required.
I will let you know here when the fix is ready so you can update the file.

Meanwhile you can use filter avf_enqueue_wp_mediaelement to avoid loading (in functions.php line 679).
Return false when not needed.

Best regards,
Günter

Hey sarawh,

Thank you for the inquiry.

You can use the avf_modify_thumb_size filter to adjust the dimension of the existing thumbnails instead of directly editing the functions.php file. Usage examples can be found in the following threads.

// https://kriesi.at/support/topic/alter-featured-image-on-blog-does-not-work/#post-1342432
// https://kriesi.at/support/topic/title-and-image/#post-1304670
// https://kriesi.at/support/topic/source-for-masonry-image-size/

Best regards,
Ismael

Hi,
I see that you have placed the code that is causing problems in your WordPress ▸ Customize ▸ Additional CSS

This should not be there, please remove.
I also see that you have the same code in your WordPress ▸ Appearance ▸ Theme File Editor ▸ Enfold ▸ functions.php

please also remove this and then check again.
If you are not using a child theme I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets, because you will lose the custom code that you add to the enfold ▸ functions.php when you update next time.

Best regards,
Mike

Hi,
If you are using a child theme then yes leave the code in the functions.php, otherwise I recommend the WPcode plugin this plugin supports PHP code snippets, JavaScript code snippets, & CSS code snippets and you will not lose your code when you update as you would if the code is in your parent theme functions.php.
To change it into a button using the magic wand in the Post editors we will need to change the function a little to use do_shortcode
Here is an example that I tested on my yest site and works, you can change the button code to suit your needs:

add_action("ava_after_content", function() {
    if (is_singular('post')) {
        echo do_shortcode("[av_button label='Back to Bolg' icon_select='yes' icon='ue830' font='entypo-fontello' icon_hover='aviaTBicon_hover' link='manually,#' link_target='' size='medium' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='' one_element_template='' av_uid='' sc_version='1.0' admin_preview_bg='']");
    }
}, 10);

Best regards,
Mike

Hey Timothy,
Thank you for your patience, for the image on your homepage in the lightbox, I can see the difference better when I compare the original image with the lightbox image, I have linked to all three images below.
I believe that the issue is related to the color profile of your original image, please see this thread in the thread a professional photographer had accidentally changed his Lightroom color profile to ProPhoto RGB and the supporting thread that I referred to had:

The problem is inside your Photoshop setting. Try Preferences -> Color Setting -> Color Policies and enable the cklickbox at Profile Mismatches and Missing Profiles

the issue points to the PHP GD Library used by WordPress not being able to create the new image sizes with certain color profiles.
I’m not a professional photographer and I could be explaining it not quite correctly, but if you used Photoshop or Lightroom or another professional image tool please review the threads and your software settings.
I hope this helps you identify the issue.

Best regards,
Mike

Hey CodeSamurai,
Thank you for your question, are you sure that you mean MySQL 8 and not PHP 8?
on my server I’m using MySQL Version 10.5.17-MariaDB-cll-lve
so MySQL 8 seems behind, most questions are about their servers are going to PHP 8 which works fine with Enfold v5.6.5+
I assume MySQL 8 would also work fine.

Best regards,
Mike

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,

The theme does not turn of file editing in WordPress, it’s likely done by your hosting provider. Please try reaching out to them.

The footer is working as expected in the version you are updating to, are you sure that you are not overriding footer.php and/or header.php in your child? Please note that there are two files you need to check for.

What kind of login do you need to inspect the problem?
Admin-rights for the backend or login to FTP?

Both please.

Best regards,
Rikard

• This reply was modified 2 years, 7 months ago by Rikard.