Hey SugarPR,

I see that you are running an old version of the theme, could you try to update to the latest version (5.7.1) to see if that helps please? The update to 5.7.1 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for sharing that. Do you need any more help on this topic?

Best regards,
Rikard

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

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

Hey Jan,

Thank you for the inquiry.

We don’t have a solution for this yet. In the meantime, you can try using the Layer Slider element. Add a Video/Audio layer, then toggle the Background Video option under the Layer Settings > Content > Media Options section. This background video should play on both desktop and mobile views.

Best regards,
Ismael

Hi,
The article said that they use 3g only for mobile, they probably use lan for the desktop and that is why the score is much higher. You should research this more I saw many articles that said that it is not a good tool.

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

Hi,
I tried looking into why PageSpeed Insights are not consent, and I found many articles like this one: Why Google PageSpeed Insights don’t reflect reality

PageSpeed Insights uses a slow 3G connection for its mobile testing, rather than 4G or 5G or a regular broadband connection. This means that the large majority of your visitors will see faster page loads and have a much better experience browsing your website by default than PageSpeed Insights suggests.

On GTMetrix the desktop version of your /counseling-austin-tx/ page is 99

but you need a paid plan to test as mobile.
The Pingdom Website Speed Test rates your /counseling-austin-tx/ mobile version as 85

DebugBear rates your /counseling-austin-tx/ mobile version as 94

This site claims to be More accurate data than Page Speed Insights:

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,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

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

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

Best regards,
Rikard

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

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

Hi,
Thanks for the mockup image, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .menu-item-has-children > a > .avia-menu-text:after {
	content:"\e873";
	font-family: 'entypo-fontello';
	right: -10px;
  position: relative;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This is the expected results:

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

Hi,
Your website link in the copyright (Website Design by) is broken, try clicking it.
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 Guenni007’s code and save.

Best regards,
Mike

Hi,
Unfortunately the line is a pseudo-element so it’s state is related to the parent element, if you want to remove the hover effect try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av_header_transparency .main_menu ul:first-child > li > a:hover {
	opacity: 1 !important;
}

Best regards,
Mike