Hi,
Thank you for your patience, I tested your function above but couldn’t reproduce the error on a single product page:

I also checked shop pages, regular pages, posts, and portfolio pages.
I do note that your code above is adding page specific classes which could cause conflicts, such as:
av-67b3u7-b76b4296f6d03b9bb4a425ab60d3cd36
avia-builder-el-0
post-entry-2559
av-3aftcf-0defea7f6cd2898ac4c585f671f6abd0
avia-builder-el-1
these didn’t cause and issues on my test site, but it’s the only thing that I can see as a possible issue.

Best regards,
Mike

Hey Manuela,
Thank you for your patience, to use an image instead of an icon in the icon box element, add a custom class to the icon box you wish to change, for this example we will use custom-image-icon note there is no dot before the class.

then add this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

.custom-image-icon .iconbox_icon {
background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
height: 23px;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.custom-image-icon .iconbox_icon:before { display: none; }

the expected results:

To use multiple images use a different class for each image.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey sebzh22,
Merci de votre patience, pour supprimer l’en-tête collant d’une page Essayez d’ajouter ce code à la fin de votre fichier functions.php dans Apparence ▸ Éditeur et ajustez l’ID de page en conséquence

— Translated with Google —

Thank you for your patience, to remove the sticky header for one page Try adding this code to the end of your functions.php file in Appearance ▸ Editor and adjust the page ID (9516) to suit

function add_custom_script(){
if(is_page(9516)){
?>
<script>
jQuery(window).load(function(){
	 jQuery('html').removeClass('html_header_sticky');      
});
</script>
<?php
}
}
add_action('wp_footer', 'add_custom_script');

Best regards,
Mike

Hi,
I’m not sure that I follow what you mean, when you say that you have copied the parent directory 5 times, do you mean that you copied the \wp-content\themes\enfold\ directory 5 times,

or that you copied the WordPress directory 5 times?

1: you can build your primary site first, but you won’t be “copying” it to the other sites, you will be using the WordPress ▸ Tools ▸ Export from that site and then WordPress ▸ Tools ▸ Import on the other sites.

2: you will not be able to “delete” the theme directories and “copy” the other directories to it, in WordPress the changes you make are stored in the database, not in the actual files.

Best regards,
Mike

Hi,
Thank you for your patience, to hide the sidebars on mobile landscape and increase the main content to 100% width, try this css:

@media only screen and (max-width: 895px) and (orientation: landscape) {
#top .entry-content-wrapper > .sidebar-left,
#top .entry-content-wrapper > .sidebar-right {
    display: none;
}
#top .entry-content-wrapper > .sidebar-left + .av_three_fifth {
	margin-left: 0;
    width: 100%;
}
}

I believe the max-width: 895px is correct, but feel free to adjust to suit your needs.
After applying the css, please clear your browser cache and sg-cache check.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, and thanks for sharing your solution, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Manuela,
Did you already find the solution to this? I checked your page and the text is below the icon, please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Thank you for your patience, I tested this function in my functions.php:

add_filter('avf_logo_subtext', 'kriesi_logo_addition');
function kriesi_logo_addition($sub) {
	$sub .= '<span class="bloginfo name">' .get_bloginfo( 'name', 'display' ).'</span>';
	$sub .= '<span class="bloginfo description">' .get_bloginfo( 'description', 'display' ).'</span>';
	return $sub;
}

it gets the site title and description from the WordPress settings, and I uploaded a small 80px red logo as the regular logo and small 80px white logo as the transparent logo in the theme options:

Then I added this css:

#top .logo,
#top .logo a {
  overflow: visible;
	display:flex;
	max-height: 80px;
	color:red;
	text-decoration: none;
}
@media only screen and (min-width: 990px) { 
#top #header.av_header_transparency .logo a {
	color:#fff;
}
}
.logo .subtext {
  font-size: 20px;
	padding-left: 20px;
    font-weight: 600;
	display: flex;
  flex-direction: column;
  align-items: flex-start;
	justify-content: center;
}
.bloginfo {
line-height:22px
}
@media only screen and (max-width: 820px) { 
.logo .subtext {
	font-size: 12px;
}
.bloginfo {
line-height:14px
}
}
@media only screen and (max-width: 610px) {
.responsive #top #wrap_all #header_main .main_menu {
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;
}
.responsive #top #header_main .logo {
    display: flex;
    width: 100%;
    justify-content: center;
}
#header_main .inner-container {
	display: flex;
    flex-direction: column;
    align-items: flex-start;
}
}

my header size is the default “Slim”, with a “Sticky Header”

Desktop before and after scroll:

Laptop:

For mobile (425px) I stacked the logo & text over the mobile menu and centered them, this seems to work better than making the text so small that I couldn’t really read it:

This is how the smallest mobile (375px) looks:

Please give this a try, I linked to my test site below.

Best regards,
Mike

Hi,
Thank you for your patience, below I have linked to your logo image, please note that it is in the lower half of the image height, try resizing the image so the logo text is the same height as the image, this will make the logo larger and center it in the container as you have requested.

Best regards,
Mike

Hi,
Thanks for the feedback, you can have the text to the right, please see our documentation here, with your code above but you will need specific css to move the “text” & “claim” there for each screen size and it is depending on your header size before and after scroll and the header height for mobile. It would be much easier if we could help on a live site.
I would recommend using “span” instead of a “div” because you will want them to display “inline” instead of “block” for the text to be to the right of the image.
I will try a Header widget solution on my test site and see if that might work out.

Best regards,
Mike

Hi,
Thank you Guenni007 for pointing out the lazy load option above in Gallery element 🙂
To remove the border try this css:

#top #main .avia-gallery .avia-gallery-big {
    padding: 0px;
    border-style: none;
    border-width: 0px;
}

The swipe option is still under “new features” in development, so there is no specific time frame.
Try checking with the photoswipe plugin author to see if there is a class that can be added to elements to activate the photoswipe lightbox, we might be able to add the class with a script?

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
I have tested the Gallery element in a 9 grid layout as you described with the Gallery Style: Big image only, other images can be accessed via lightbox

and each gallery has 5 images

and enabled lazy loading

and only the 9 images that you see on the frontend are loaded, the other 36 images only load once the lightbox is for the specific gallery is opened


so this achieves what you were describing above without any customization.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Try:

#top #avia-menu #menu-item-56 .avia_mega_div.avia_mega2 {
    width: auto;
    white-space: nowrap;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike