Hey hegartpetersen,

Thank you for the update.

If you prefer wrapping the title container into multiple rows, please try to add this css code:

#top .av-tabs-scrollable .av-tab-section-outer-container {
    overflow: visible;
}

#top .av-tabs-scrollable .av-tab-section-tab-title-container {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    min-width: unset !important;
    left: 0 !important;
    white-space: normal;
}

#top .av-tabs-scrollable .av-section-tab-title {
    flex: 0 0 auto;
}

Note that this will hide the arrow indicator beneath the active tab since it depends on the container’s positioning logic. Please refer to the documentation on adding custom css classes to elements:

— https://kriesi.at/documentation/enfold/add-custom-css/

Let us know the result.

Best regards,
Ismael

Hey Sebastian,

Thank you for the inquiry.

You can use the Column elements from the Advanced Layout Builder (ALB). Add a custom CSS class to the first (left) column (for example, av-column-with-scrollbar), then add custom css to limit its height and enable a scrollbar.

.av-column-with-scrollbar {
  height: 100vh; 
  overflow-y: auto;
  overflow-x: hidden;
}

For the right column, add the class name “av-column-without-scrollbar”, then add this css code:

.av-column-without-scrollbar {
  height: 100vh;
}

Let us know the result.

Best regards,
Ismael

Hey SurigliaStudio,
When I test your site the “Taglie” button doesn’t create a mobile style flyout menu, I assume that you now have the plugin disabled, but I think that I understand. I have created a custom function that will create a mobile style overlay menu from a sticky button on the right using a image that you can choose:


and on mobile the overlay is about 95% of the screen.
The function uses the Named Menus from your WordPress menus to show:

In Configuration there is a line to choose your menu image/icon and the default menu to show on all pages:

and below you can add as many additional menus with an array of pages that they will show on:

The code also has all of the css built-in for styling if you want to adjust.
Add this code to your child theme functions.php file, 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 the above code and save.

/**
 * Add Sticky Button with Fly-out Menu
 * Add this to your Enfold child theme's functions.php
 */

function custom_sticky_menu_button() {
    // Configuration - Change these values as needed
    $button_image = '/wp-content/uploads/2026/01/menu.png'; // Update path to your PNG
    $menu_slug = 'sticky menu'; // Default menu slug - change as needed
    
    // Optional: Set different menu based on page ID
    $current_page_id = get_the_ID();
    // Example: Use different menu for specific pages
     if (in_array($current_page_id, array(1028, 1080, 1031, 1034))) {
        $menu_slug = 'sticky menu two';
     }
	if (in_array($current_page_id, array(1376, 1331, 1277, 1283))) {
        $menu_slug = 'sticky menu three';
     }
    
    // Get the menu
    $menu_items = wp_get_nav_menu_items($menu_slug);
    
    if (!$menu_items) {
        return; // Exit if menu doesn't exist
    }
    ?>
    
    <!-- Sticky Button -->
    <div id="sticky-menu-btn" class="sticky-menu-button">
        " alt="Menu">
    </div>
    
    <!-- Fly-out Menu Overlay -->
    <div id="flyout-menu-overlay" class="flyout-menu-overlay">
        <div class="flyout-menu-close">×</div>
        <nav class="flyout-menu-content">
            <?php
            wp_nav_menu(array(
                'menu' => $menu_slug,
                'container' => false,
                'menu_class' => 'flyout-nav-menu',
                'fallback_cb' => false
            ));
            ?>
        </nav>
    </div>
    
    <style>
        /* Sticky Button Styles */
        .sticky-menu-button {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 9998;
            transition: opacity 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
            overflow: hidden;
        }
        
        .sticky-menu-button img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .sticky-menu-button.hidden {
            opacity: 0;
            pointer-events: none;
        }
        
        /* Fly-out Menu Overlay */
        .flyout-menu-overlay {
            position: fixed;
            top: 0;
            right: -100%;
            width: 25%;
            height: 100vh;
            background: #fff;
            z-index: 9999;
            transition: right 0.4s ease;
            box-shadow: -2px 0 10px rgba(0,0,0,0.2);
            overflow-y: auto;
        }
        
        .flyout-menu-overlay.active {
            right: 0;
        }
        
        /* Close Button */
        .flyout-menu-close {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 36px;
            cursor: pointer;
            color: #333;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            transition: color 0.3s ease;
        }
        
        .flyout-menu-close:hover {
            color: #000;
        }
        
        /* Menu Content */
        .flyout-menu-content {
            padding: 80px 30px 30px;
        }
        
        .flyout-nav-menu {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .flyout-nav-menu li {
            margin: 0 0 15px 0;
        }
        
        .flyout-nav-menu a {
            display: block;
            padding: 12px 0;
            color: #333;
            text-decoration: none;
            font-size: 16px;
            transition: color 0.3s ease;
            border-bottom: 1px solid #eee;
        }
        
        .flyout-nav-menu a:hover {
            color: #000;
        }
        
        /* Sub-menu styles */
        .flyout-nav-menu .sub-menu {
            list-style: none;
            margin: 10px 0 0 20px;
            padding: 0;
        }
        
        .flyout-nav-menu .sub-menu a {
            font-size: 14px;
            padding: 8px 0;
        }
        
        /* Mobile Styles */
        @media (max-width: 768px) {
            .flyout-menu-overlay {
                width: 95%;
            }
        }
    </style>
    
    <script>
        (function() {
            var btn = document.getElementById('sticky-menu-btn');
            var overlay = document.getElementById('flyout-menu-overlay');
            var closeBtn = document.querySelector('.flyout-menu-close');
            
            // Open menu
            btn.addEventListener('click', function() {
                overlay.classList.add('active');
                btn.classList.add('hidden');
                document.body.style.overflow = 'hidden'; // Prevent body scroll
            });
            
            // Close menu
            closeBtn.addEventListener('click', function() {
                overlay.classList.remove('active');
                btn.classList.remove('hidden');
                document.body.style.overflow = ''; // Restore body scroll
            });
            
            // Close on overlay click outside menu
            overlay.addEventListener('click', function(e) {
                if (e.target === overlay) {
                    overlay.classList.remove('active');
                    btn.classList.remove('hidden');
                    document.body.style.overflow = '';
                }
            });
        })();
    </script>
    
    <?php
}
add_action('wp_footer', 'custom_sticky_menu_button');

Adjust the image, menus, and page IDs to suit.

Best regards,
Mike

Hey ti2media,
Try adding this snippet to your child theme functions.php:

function add_sticky_info_box() {
    ?>
    <style>
        .sticky-info-box {
            position: fixed;
            bottom: 120px;
            right: 20px;
            width: 300px;
            height: 300px;
            background: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9999;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-sizing: border-box;
            transition: opacity 0.3s ease;
        }
        
        .sticky-info-box.hidden {
            display: none;
        }
        
        .sticky-info-box-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 15px;
        }
        
        .sticky-info-box-title {
            font-size: 20px;
            font-weight: bold;
            color: #333;
            margin: 0;
            flex: 1;
        }
        
        .sticky-info-box-close {
            background: none;
            border: none;
            font-size: 24px;
            color: #999;
            cursor: pointer;
            padding: 0;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.2s ease;
        }
        
        .sticky-info-box-close:hover {
            color: #333;
        }
        
        .sticky-info-box-message {
            flex: 1;
            color: #666;
            font-size: 14px;
            line-height: 1.6;
            margin-bottom: 20px;
            overflow-y: auto;
        }
        
        .sticky-info-box-button {
            background: #0073aa;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-block;
            text-align: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-box-button:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle {
            position: fixed;
            bottom: 120px;
            right: 50px;
            width: 50px;
            height: 50px;
            background: #0073aa;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            z-index: 9998;
            display: none;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }
        
        .sticky-info-toggle:hover {
            background: #005a87;
        }
        
        .sticky-info-toggle.visible {
            display: flex;
        }
    </style>
    
    <div class="sticky-info-box" id="stickyInfoBox">
        <div class="sticky-info-box-header">
            <h3 class="sticky-info-box-title">Important Information</h3>
            <button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button>
        </div>
        <div class="sticky-info-box-message">
            <p>This is your information box! You can customize this message to display any content you'd like to share with your visitors.</p>
        </div>
        <a href="/your-page-url" class="sticky-info-box-button">Learn More</a>
    </div>
    
    <button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>
    
    <script>
        (function() {
            var infoBox = document.getElementById('stickyInfoBox');
            var closeBtn = document.getElementById('closeInfoBox');
            var toggleBtn = document.getElementById('infoToggle');
            
            // Close the info box
            closeBtn.addEventListener('click', function() {
                infoBox.classList.add('hidden');
                toggleBtn.classList.add('visible');
            });
            
            // Show the info box again
            toggleBtn.addEventListener('click', function() {
                infoBox.classList.remove('hidden');
                toggleBtn.classList.remove('visible');
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'add_sticky_info_box');

Then adjust the title, message, buttone text & link to suit. You can also adjust the CSS to change colors, etc.
It places the box & info button 120px from the bottom so they are above the scroll-top button, ratio than have them move if the scroll-top shows, which would not be so good.

Best regards,
Mike

Hey oburlin,
For the image caption, you will note in the element that it’s placement is in the overlay:

To move to the lower part of the image, I see that you have added this custom css:

.av-image-caption-overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    bottom: 0px !important;
    color: black !important;
    height: auto !important;
    left: 50% !important;
    transform: translate(-50%) !important;
    width: auto !important;
}

Resulting in this:

To make it one line try removing width: auto !important; from your css.
Then you would see:

If you want the caption below the image, try this css instead:

#top .av-image-caption-overlay {
    height: auto;
    width: 100%;
    left: 0px;
    bottom: 0px;
    transform: translateY(100%);
}
#top .av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
    opacity: 0.4 !important;
}
#top .avia-image-container .av-caption-image-overlay-bg {
    opacity: 0.4;
    background-color: transparent;
}
#top .avia-image-container .av-image-caption-overlay-center {
    color: #000;
}

resulting in this:

Best regards,
Mike

Hey Russell,

Thanks for reaching out again.

We can now see the video and can confirm that the scroll animations in the old site can be recreated with Enfold. You can apply these animations to Column elements, and they should be automatically triggered on scroll. You can also utilize the Layer Slider plugin, which is natively included in the theme, to create hero sections or sliders.

Unfortunately, presale questions are one-time and can’t be continued like forum discussions. You will need to acquire a theme license and then use the purchase code to register an account on the forum.

— https://kriesi.at/support/register/

Once registered, you can open a thread using this form: https://kriesi.at/support/forum/enfold/#new-post

Let us know if there’s anything else we can help with.

Best regards,

Previous Reply:
============================================================================================================
Thank you for your interest in Enfold.

The videos are not accessible, so we’re not able to view them. In any case, the theme comes with built-in demo content, so you don’t need to start from scratch. You can simply import a demo and then incorporate your existing designs, images, and content to match what you have in mind. It’s very user-friendly, with plenty of customization options and a powerful Advanced Layout Builder where most of the content creation and site building will take place.

If you have any questions or need help with development, feel free to reach out to us here in the forum — we’re happy to help.

You can preview the available theme demos below.

— https://kriesi.at/themes/enfold-overview/

To help you get started, please check out the documentation.

— https://kriesi.at/documentation/enfold/

Let us know if you have any more questions.
============================================================================================================

Best regards,
Ismael

Hi,

Thank you for the update.

You can add this css code to reverse the burger menu animation from left to right.

.html_av-overlay-side .av-burger-overlay-scroll {
    width: 500px;
    transform: translateX(-500px);
    left: 0;
    right: auto;
}

For the home page, you can try this css code to completely hide the header.

.home #header 
    display: none;
}

Best regards,
Ismael

Hi,
Thanks for your help Guenni007, but in my test it seems that only targeting the ID “#av_section_1” didn’t help, I tried adjusting to const container = document.querySelector('#av_section_1 .av-parallax-object'); to target the text in the parallax but as you pointed out it was jerky for the speed needed.
With trial and error and AI I found that this javascript & css works well for desktop & mobile and smooths out most all the jerk from the text and background image.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_text_in_parallax_down_on_scroll() { ?>
  <script>
  document.addEventListener("DOMContentLoaded", function () {
  const el = document.querySelector("#av_section_1 .av-parallax-object");
  const bg = document.querySelector("#av_section_1 .av-parallax");

  if (!el || !bg) return;

  const isMobile = window.innerWidth < 768;

  const textSpeed = isMobile ? 0.9 : 0.7;
  const bgSpeed = isMobile ? 0.3 : 0.2;

  let currentYText = 0;
  let currentYBg = 0;

  const updateParallax = () => {
    const scrollY = window.scrollY || window.pageYOffset;

    // Text transform
    const targetYText = scrollY * textSpeed;
    currentYText += (targetYText - currentYText) * 0.05;
    el.style.transform = translateY(${currentYText}px);

    // Background transform
    const targetYBg = scrollY * bgSpeed;
    currentYBg += (targetYBg - currentYBg) * 0.05;
    bg.style.transform = translateY(${currentYBg}px); // GPU accelerated

    requestAnimationFrame(updateParallax);
  };

  requestAnimationFrame(updateParallax);
});
  </script>
  <style>
  #av_section_1 .av-parallax-object {
  position: relative;
  top: 0;
  left: 0;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}
#av_section_1 {
  position: relative;
  overflow: hidden;
}
#av_section_1 .av-parallax {
  background-attachment: scroll !important; /* disables fixed scroll handling */
  background-position: center center !important;
  transform: none !important;
  will-change: auto !important;
}  
  </style>
  <?php
}
add_action( 'wp_footer', 'move_text_in_parallax_down_on_scroll', 99 );

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:

and ensure that it is activated, then add the above code and save.

Best regards,
Mike

Hi,
I checked your page on my Android mobile device, but I don’t see that it is automatically scrolling, up or down, please explain further.

Best regards,
Mike

Hey Tilman,

Thank you for the inquiry.

You can use the following css code to adjust the height of the burger menu items and the width of the overlay container.

.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 2em;
    height: auto;
    padding: 15px 50px;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll {
    width: calc(100vw - 65%);
}

Best regards,
Ismael

Hey Tilman,

Thank you for the inquiry.

You can use the following css code to adjust the height of the burger menu items and the width of the overlay container.

.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    line-height: 2em;
    height: auto;
    padding: 15px 50px;
}

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll {
    width: calc(100vw - 65%);
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

Are you trying to make the document automatically scroll and open the tabs when the links are used? If so, you can try adding this script in the functions.php file:

add_action('wp_footer', function() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        (function($) {
            function scrollToTab(selector, eventType) {
                $(selector).on(eventType, function(e) {
                    var hash = eventType === 'load' ? window.location.hash : $(this).attr('href').split('#')[1];
                    if (!hash) return;
                    var tab = $('.av-section-tab-title[href="#' + hash + '"]');
                    if (tab.length) {
                        var parent = tab.closest('.av-tab-section-outer-container');
                        var pos = parent.offset();
                        tab.trigger('click');
                        setTimeout(function() {
                            $(window).scrollTop(pos.top - 100);
                        }, 100);
                    }
                });
            }
            scrollToTab('.avia-buttonrow-wrap a', 'click');
            scrollToTab(window, 'load');
        })(jQuery);
    });
    </script>
    <?php
});

Best regards,
Ismael

Hi,

We added the changes in the functions.php file to prevent the scroll. Regarding the sender form, please contact the plugin developers.

function inline_popup_enabler(){ ?>
    <script>
    (function($){
        $(window).on('load', function() {
			$('.inline_popup').addClass('no-scroll');
            $('.inline_popup').magnificPopup({
                type: 'inline',
                midClick: true,
                callbacks: {
					beforeOpen: function () {
					  $('body').css("overflow-y", "hidden");
					},
					close: function() {
					  $('body').css("overflow-y", "auto");
					},
                    open: function() {
                        (function (s, e, n, d, er) {
                            s['Sender'] = er;
                            s[er] = s[er] || function () {
                                (s[er].q = s[er].q || []).push(arguments);
                            }, s[er].l = 1 * new Date();
                            var a = e.createElement(n),
                                m = e.getElementsByTagName(n)[0];
                            a.async = 1;
                            a.src = d;
                            m.parentNode.insertBefore(a, m);
                        })(window, document, 'script', 'https://cdn.sender.net/accounts_resources/universal.js', 'sender');
                        
						if ($('.sender-form-field iframe').length > 0) {
							console.log("sender form initialized");
						} else {
							sender('4f4c8522254761');
						}   
                    }
                }
            });
        });
    })(jQuery);
    </script>
<?php }
add_action('wp_footer', 'inline_popup_enabler');

Best regards,
Ismael