Hi,
I believe that you misunderstand, if you want to use your button tag then you don’t need the jQuery I posted above, just add this to your page in a code block element:
<button type="button" onclick="window.history.back()">Click me</button>
If you want to use the button element, as above, just follow those steps:
Add a button to a page with the custom classes back menu-item
then add this to your functions.php:

function custom_script() { ?>
  <script>(function($){
  $(".back.menu-item a").attr("onclick", "window.history.back()");
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Don’t do both, and don’t use the plugin.
If you still have trouble please include an admin login in the Private Content area so we can add this for you.

Best regards,
Mike

Hi,
I believe that you are referring to the Widget Navigation Menu,

to add the icons to those menu items add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#menu-footer-menu li.menu-item > i ~ a {
	display: inline-block;
}
#menu-footer-menu li.menu-item > i:before {
	color: #fff;
}

Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor, 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. Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

function add_icon_to_widget_menu_items() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function() {
    const menuItems = document.querySelectorAll('#menu-footer-menu li'); 
    menuItems.forEach(function(item) {
        let classes = item.className.split(/\s+/);
        let iconClass = classes.find(c => c.startsWith('menu-item-icon-'));
        if (iconClass) {
            let iconName = iconClass.replace('menu-item-icon-', '');
            item.innerHTML = '<i class="fa ' + iconName + '"></i> ' + item.innerHTML;
        }
    });
});
</script>
  <?php
}
add_action( 'wp_footer', 'add_icon_to_widget_menu_items', 99 );

Best regards,
Mike

Hey Rocuant,

Thank you for the inquiry.

We added this code in the functions.php file to insert the widget area in the header.

<?php

//--------------------------------
// Header widget area
//--------------------------------

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

We then created a custom widget area named “header” in the Appearance > Widgets panel and added a Text widget. To adjust the widget’s position within the header, we added the following code in the Quick CSS field:

#top #header #header_main .widget {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
}

Please check the documentation below for more info: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hi,

Failed to load resource: the server responded with a status of 404 () post-206.css:1
https://www.option-webdesign.nl/wp-content/uploads/dynamic_avia/avia_posts_css/post-206.css?ver=ver-1710774338

If your server fails to generate the dynamic posts css file when the plugins are updated, try to disable the feature and allow the theme to instead add the custom styles inline. You can add this code in the functions.php file:

/**
 * Filter to skip css file generation.
 * You can add logic to skip for certain pages/posts only.
 * 
 * @since 4.8.6.1
 * @param boolean $create
 * @return boolean					true | false or anything else to skip generation of css file
 */
function custom_avf_post_css_create_file( $create )
{
	return false;
}

add_filter( 'avf_post_css_create_file', 'custom_avf_post_css_create_file', 10, 1 );

Best regards,
Ismael

Hi,
Thank you for your patience as I understand what you would like to achieve, a full width changing image with a logo in the center at the top of every, post, page, & archive.
I note a few limitations, first none of our sliders offer a random image on page load, so they would always start with the same image and rotate in order. Second you would like to add this to the top of every, post, page, & archive without editing each post & page, etc.
So try this custom code to create this, 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 random_image_slider_shortcode($atts) {
    // Define default attributes and override with user-defined attributes
    $attributes = shortcode_atts(
        array(
            'mobile_height' => '300px', // default mobile height
            'desktop_height' => '500px', // default desktop height
        ),
        $atts
    );

    // Define your image URLs here
     $images = array(
        'https://example.com/wp-content/uploads/image1.jpg',
        'https://example.com/wp-content/uploads/image2.jpg',
        'https://example.com/wp-content/uploads/image3.jpg',
        'https://example.com/wp-content/uploads/image4.jpg',
        'https://example.com/wp-content/uploads/image5.jpg',
    );
    // Start building the output
    $output = '<div id="random-image-slider" class="avia-section container_wrap fullsize" style="height: ' . $attributes['desktop_height'] . '; background-size: cover; position: relative;">';

    // Add logo overlay
    $output .= '<img src="https://example.com/wp-content/uploads/logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" alt="Logo">';

    // Add script for changing the background image
   $output .= '<script>
        (function() {
            var images = ' . json_encode($images) . ';
            var currentIndex = Math.floor(Math.random() * images.length); // Start at a random index
            var container = document.getElementById("random-image-slider");

            function changeImage() {
                container.style.backgroundImage = "url(" + images[currentIndex] + ")";
                currentIndex = (currentIndex + 1) % images.length;
            }

            changeImage(); // Initial call to set the first image

            setInterval(changeImage, 3000); // Change image every 3 seconds

            // Responsive height adjustment
            function adjustHeight() {
                var windowHeight = window.innerHeight;
                var isMobile = window.matchMedia("(max-width: 768px)").matches;
                container.style.height = isMobile ? "' . $attributes['mobile_height'] . '" : "' . $attributes['desktop_height'] . '";
            }

            window.addEventListener("resize", adjustHeight);
            adjustHeight(); // Initial call to set height
        })();
    </script>';

    $output .= '</div>';

    return $output;
}

add_shortcode('random_image_slider', 'random_image_slider_shortcode');

In the code above change the 5 images to your image urls, and ensure to use full urls to the images, and also change the image url in the logo overlay.
If you just wanted to use this script and add the element manually to your pages you could use this shortcode in a code block:

[random_image_slider mobile_height="300px" desktop_height="500px"]

Note that you can change the height of the element for mobile and desktop. Also note that if you use large square images the whole image will not show on every device, the image will be cropped to the height that you set, also this will not be full width when used in a code block element, this is an example of the results:

Now since you want this added automatically to the top of every, post, page, & archive create a second PHP snippet in the WP Code plugin and add this code:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_single() || is_page() || is_archive() ) {
		echo do_shortcode('[random_image_slider mobile_height="300px" desktop_height="500px"]');
	}
}

You can change the heights to suit, since this is added to the pages while the page is being created the element will be full width:

Give this a try.

Best regards,
Mike

Hi
I adjusted to this to account for the height of the header on desktop.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 989) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
	else if (width >= 990) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '187px'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

and the css:

@media only screen and (max-width: 989px) { 
.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}
}
@media only screen and (min-width: 990px) { 
.responsive #top #sub_menu1.av-submenu-container.sticky-top {
	position:fixed!important;
	top:172px!important;
	z-index:600!important;
}
}

Best regards,
Mike

Hey jaimemerz,
Thank you for the link to your site I added this snippet to your WP Code plugin and ensured that in the top right corner it was a code type: PHP snippet

then I added this code and saved.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 767) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

I then added a second snippet with this css:

.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}

and now on your page the fullwidth submenu is sticky when it reachs the top, and un-sticks with you scroll back to the top:

Please clear your browser cache and check.
Best regards,
Mike

Hey calebcuster,
Unfortunately the Animated Countdown element datepicker will not allow you to choose a past date so this will not work, the post that you linked to was from 2015.
Instead try this shortcode count up clone, 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 wp_custom_countup_shortcode($atts) {
    // Extract shortcode attributes
    $a = shortcode_atts(array(
        'date' => '2020-01-01', // Default date
        'color' => 'black', // Default font color
        'background' => 'white', // Default background color
        'offset' => '0', // Default timezone offset in hours
    ), $atts);

    $uid = uniqid('countup_');

    // Enqueue jQuery if it's not already included
    wp_enqueue_script('jquery');

    // Output HTML
    $html = "<div id='{$uid}'  class='av-countdown-timer-inner'>
                <span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time weeks'></span><span class='av-countdown-time-label'>Weeks</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time days'></span><span class='av-countdown-time-label'>Days</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time hours'></span><span class='av-countdown-time-label'>Hours</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time minutes'></span><span class='av-countdown-time-label'>Minutes</span></span></span>
<span class='av-countdown-cell av-align-center'><span class='av-countdown-cell-inner' style='color: {$a['color']}; background-color: {$a['background']};'><span class='av-countdown-time seconds'></span><span class='av-countdown-time-label'>Seconds</span></span></span>
             </div>";

    // Adjust the current time for the timezone offset
    $offsetMilliseconds = $a['offset'] * 3600 * 1000; // Convert hours to milliseconds

    // JavaScript to update the countdown
    $html .= "<script>
                jQuery(function($) {
                    var countUpDate = new Date('{$a['date']}').getTime();
                    var x = setInterval(function() {
                        var now = new Date().getTime() + {$offsetMilliseconds}; // Adjust for timezone offset
                        var distance = now - countUpDate;
                        var weeks = Math.floor(distance / (1000 * 60 * 60 * 24 * 7));
                        var days = Math.floor((distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60 * 24));
                        var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                        var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                        var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                        
                        $('#{$uid} .weeks').text(weeks);
                        $('#{$uid} .days').text(days);
                        $('#{$uid} .hours').text(hours);
                        $('#{$uid} .minutes').text(minutes);
                        $('#{$uid} .seconds').text(seconds);
                    }, 1000);
                });
              </script>";

    return $html;
}
add_shortcode('custom_countup', 'wp_custom_countup_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then use this shortcode on the page to display:
[custom_countup date="2024-03-10" color="#fff" background="#000" offset="-4"]
the first attribute is the date in the past, then the font color, then the cell background color, and then the time offset, this is the difference between your server time and the time you want to use, since our servers are not always in the same timezones as we are. The default is zero if you don’t add this attribute.
This is the result:

This uses the same classes as the countdown element so the style is pretty close, here is what the two together look like:

Best regards,
Mike

Hey micheladalcastagne,
Thanks for your patience and the link to your site, I don’t have a lot experience with the polylang plugin, first I noted that your homepage in both languages are named the same so I added the language code to them to sort them out in the theme options because your site domain is showing as a EN language and thus your menu is EN when you want it to be IT:

so now we can sort it out a little better:

Then going to the Languages ▸ Settings I found that you seem to need to choose the language from above before setting the options:

So now I have the menu language to match the page language along with the correct flag.

Now for your second issue where when you are on the /privacy-policy/ page you can use the menu items to get back to your homepage because all of your menu items are only hash links.
Since you are not using a child theme I installed the WP Code plugin then added a new snippet, in the top right corner use the PHP snippet as the code type:

then added this code, I also created two new menus for you, one for each /privacy-policy/ page with the full urls to the homepage.

add_filter( 'wp_nav_menu_args', 'ppen_nav_menu_args' );
function ppen_nav_menu_args( $args = '' ) {
if($args['theme_location'] === 'avia') {
if( is_page( 627 ) ) {
$args['menu'] = '25';
}
return $args;
}
}

add_filter( 'wp_nav_menu_args', 'ppit_nav_menu_args' );
function ppit_nav_menu_args( $args = '' ) {
if($args['theme_location'] === 'avia') {
if( is_page( 3 ) ) {
$args['menu'] = '24';
}
return $args;
}
}

Now each /privacy-policy/ page has a working menu to the correct homepage.
Best regards,
Mike

Hey Volgspot,
Thanks for your patience, are you using a Mailchimp form in your sidebar, or were you using a third party Mailchimp form plugin before this occured?
Have you recently updated your PHP from v7.4 to v8?
If so try comparing your webhost PHP extensions for PHP 7.4 & 8.0 that same extension may not be enabled by default for your new PHP version causing the error, here is an example of the enabled extensions for PHP v8 on my site:

If you can’t find a difference try rolling back to v7.4 to rule out this as a cause.
If this doesn’t help and you have tried also disabling all of your plugins, please include an admin login in the Private Content area so we can examine.

Best regards,
Mike

Hi,
To change the number of grid columns on a archive page, such as categories, edit your \wp-content\themes\enfold\archive.php on line 69 look for ‘columns’ => 3; and change to the number you wish:

You can copy the modified file to your child theme if you wish.

Best regards,
Mike

Hey Jan,

I tried to add a solution with WP filter – that would be a solution to maintain code in one place and also for other plugins to hook.

If you could please test it before we add it to final core.

1.) replace enfold\js\avia-js.js with

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_6_10/js/avia.js

https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_6_10/js/avia-js.js

Check class aviaJSHelpers in this file.

2.) in the files you mentioned instead of your code add:

		//	allow 3-rd party plugins to hook (see enfold\js\avia-js.js aviaJS.aviaJSHelpers)
		if( window['wp'] && wp.hooks )
		{
			allow_continue = wp.hooks.applyFilters( 'aviaCookieConsent_allow_continue', allow_continue );
		}

3) To load WP hook js in enfold\functions.php around line 574:

		wp_enqueue_script( 'avia-js', "{$template_url}/js/avia-js{$min_js}.js", array(), $vn, false );

replace with:

		wp_enqueue_script( 'avia-js', "{$template_url}/js/avia-js{$min_js}.js", array( 'wp-hooks' ), $vn, false );

Thank you for checking in advance and your help.

Regards,
Günter