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 this instead

@media only screen and (min-width: 768px) { 
    #top .avia_codeblock_section .woocommerce.columns-4, #top .avia_codeblock_section .products.columns-4 {
        display: flex; 
      }
      
      #top .avia_codeblock_section .products .product.last, #top #main .avia_codeblock_section .products .product.last {
        margin-right: 13px;
      }
}

Best regards,
Mike

Hi,
Glad that we could help.

Best regards,
Mike

Hi,
Try this CSS instead:

#top .avia_codeblock_section .woocommerce.columns-4, #top .avia_codeblock_section .products.columns-4 {
  display: flex; 
}

#top .avia_codeblock_section .products .product.last, #top #main .avia_codeblock_section .products .product.last {
  margin-right: 13px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, and removing the previous css, please clear your browser cache and check.

Best regards,
Mike

Hey Aubin,
Please ensure that you have Enfold Theme Options ▸ Shop Options ▸ Product gallery ▸ WooCommerce 3.0 product gallery enabled

Best regards,
Mike

Hey lyubopopov,
Thank you for the link to your site, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, or if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save:

function select_value_in_form() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    var selectFields = document.querySelectorAll('.page-id-15 #avia_6_1');
    selectFields.forEach(function(selectField) {
        for (var i = 0; i < selectField.options.length; i++) {
            if (selectField.options[i].value === 'Brazil') {
                selectField.selectedIndex = i;
                break;
            }
        }
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'select_value_in_form', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
I wrote this to only work on the one page so it won’t interfere with other pages.

Best regards,
Mike

Hey schweg33,
Try this CSS in your <strong style=’color:#000′>Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 1224px) { 
#top.home .avia-button.avia-size-small {
	min-width: 100%;
} 
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
I would recommend copying the css stylesheets from your css directories and adding it to your child theme stylesheet, so it is all in one file, and then check.
I’m not sure about the javascript files, you would need to determine what they do first and if it is something that you need, there is a good chance that the javascript and other files are for customizations or to fix errors that might already be fixed.
I recommend testing your site behavior first and see if anything is different, not style but function, if everything works correctly then there will be no need to add the javascript and other files.
So far your comments have only been about style, so copying the css files should fix this.

Best regards,
Mike

Hi,
I see it, before scroll none:

after scroll it shows:

if you had something different in mind, please upload a mockup demonstrating what you would like to see so we can understand better

Best regards,
Mike

Hey Sebastian,
If you have the shrinking header applied then you can add shadow to the header when the class header-scrolled is added.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#header.av_minimal_header_shadow.header-scrolled {
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
}
#header.av_minimal_header_shadow {
    box-shadow: none;
}

If this doesn’t work for you then we will need to see your page.

Best regards,
Mike

Hi,
I don’t know why the pagespeed scores are so different, but when I first tested your homepage this morning it was 78 and after my adjustments is was 89-94, I think that is pretty good.
So on your /counseling-austin-tx/ page with the video when I first tested it was 62, then I disabled your EWWW Image Optimizer plugin and it jumped to 82.
Please see the links below.

Best regards,
Mike

Hey manurimini,
As I understand your question when you click a anchor link the page scrolls too far and goes under the sticky sub-menu, to change this you will need to adjust the offset.
The following script will change it but you may need to adjust the offset for your site, so in this example our header is 80px high on mobile and the sub-menu is 60px height, making 140px:

The height doesn’t change until 990px when the burger menu is replaced with text items, and then the header is 90px high on mobile and the sub-menu is 60px height, making 150px:

So add this code to the end of your child theme functions.php file in Appearance ▸ Editor or If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save.

function custom_change_offset() { ?>
  <script>
(function($) {
	var width = $(window).width();
    if ((width < 989)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
      var target = $('#'+location.href.split("#")[1]);
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 140 //offset
        }, 1000);
        return false;
      }
    }
    } 
    else if ((width > 990)) {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
&& location.hostname == this.hostname) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
  });
  //Executed on page load with URL containing an anchor tag.
  if($(location.href.split("#")[1])) {
  	var targett = $('#'+location.href.split("#")[1]);
      if (targett.length) {
        $('html,body').animate({
          scrollTop: targett.offset().top - 150 //offset
        }, 1000);
        return false;
      }
    }
    }
}(jQuery));
</script>
  <?php
}
add_action( 'wp_footer', 'custom_change_offset', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Note that there is four places you may need to adjust two 140px & two 150px
Also note that you can add more space if you like, it doesn’t have to be exact.
In my example I added a red border around the sections to make it easy to see, on mobile it is like this:

and on tablet 1024px like this:

and desktop like this:

Please note that when testing by changing your browser widow size it is best to reload the page so the screen size can be recalculated, this won’t be an issue on real devices.

Best regards,
Mike

Hey Diana,
For #2 the selection menu items in “uppercase” due to this custom css, try to find the text-transform and remove:

if you can’t find it try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #main .avia_ajax_form .select {
    text-transform: none !important;
}

For your first question, the background color is set by your browser, it is blue on my computer:

When I search stackoverflow.com I’m not able to find any working solutions, most people say that it is not possible, I tried for almost an hour but didn’t find one.

Best regards,
Mike

Hey PutmakerAG,
This is created by the browser from the title attribute, the theme doesn’t have an option to block this browser behavior, try this solution ▸ https://kriesi.at/support/reply/1345583/
If you need further assistance please log in to the support forum and open a new thread If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.
Please note that using the contact form is not appropriate for support questions.

Best regards,
Mike

Hey JoeSurf,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width:767px){
.responsive .logo img, .responsive .logo svg {
height: 282px !important;
}
}

Then clear your browser cache and any cache plugin, and check.
Please note that testing with iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.

Best regards,
Mike