Hi,
Thanks, I see the filter in place, but I don’t find the post-css or this error on your site.

Best regards,
Mike

Hi,
Thank you for your patience, I believe that it is sorted out now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks the is pretty good, probably better that my approach, see my text here:
My test ▸ https://enfold.savvyify.com/guenni007-sidebar-header/
I probably need a little more css, but thank you for sharing :)

Best regards,
Mike

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

#main .avia-content-slider .slide-meta time {
    display: none;
}

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,
It looks like there is an error in your SVG class codes, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to correct:

#header.header-scrolled-full .av-contains-svg .st0 {
    fill: #000;
}

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,
The color is set to white here:

Best regards,
Mike

Hi,
The page that you linked to is not using the Enfold Advanced Layout Builder for the product, it is using the woocommerce product like in your test page, nonetheless I added some custom classes to your original /dji-mavic-3-classic/ product to try to get this to work.
In this text element:

I added the custom class product-type-variable :

and in the title H1 tag I added the custom class product_title, note that you must use the “text tab to add the class:

and now it works:

You will need to manually change your other products like this.

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,
Ok, thank you, I see the Variation Title in the variation but it doesn’t seem to work on the frontend. I don’t see any errors that might point to a cause.
I did find the script that I posted above was in your child theme style.css so I moved it to your child theme functions.php and it changes the product title when a variation is picked, so that is good news:

Best regards,
Mike

Hi,
I tried to create one for you but didn’t get the variations correct, please see the link below and adjust the variations. Do not use the Advanced Layout Builder, only use the woocommerce product fields:

Best regards,
Mike

Hi,
Perhaps you can post a admin login in the Private Content area so we can look.

Best regards,
Mike

Hi,
I’m not sure how https://mart-anthony-stark.github.io/Enfold-js/ works, but I don’t think you can animate the color sections, you will need to animate the objects inside.
Try using the theme settings, we are limited to supporting custom code snippets and javascript libraries. The login doesn’t work.

Best regards,
Mike

Hi,
Odd, it works for me, this is what it looks like:

Best regards,
Mike

Hi,
Thanks for the feedback, the issue is that the example link is using a normal menu and you are using a mobile burger menu for your desktop, these are two different menus.
Whe I checked your site I found no “Book Now” button so I created a new one for you, and added the required custom class menu-item-avia-special cta which was disabled on your site, and then I added this css:

.html_burger_menu_active #header .avia-menu .menu-item-avia-special.cta {
  display: block !important; 
}

and Guenni007’s solution works great, thanks for sharing Guenni007!

you will need to adjust the button url as I didn’t know the like you wanted.

Best regards,
Mike

Hi,
To change this so it only works on screens larger than 768px I changed the code to this, which also adds some body margin so it won’t overlap the page content, and I make the menu items closer and I adjusted the social icons, please check.

function create_a_sidebar_header_with_burger_menu() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    // Check if the HTML element has the "wp-toolbar" class
    if (document.documentElement.classList.contains('wp-toolbar')) {
        return; // Exit the script if "wp-toolbar" class is found
    }

    // Check if the screen width is larger than 768px
    if (window.innerWidth <  768) {
        return; // Exit the script if the screen width is less than 768px
    }

    // Create the main toolbar div
    const toolbar = document.createElement('div');
    toolbar.id = 'right-toolbar';

    // Create the inner content divs
    for (let i = 1; i <= 3; i++) {
        const contentDiv = document.createElement('div');
        contentDiv.className = 'toolbar-content';
        contentDiv.id = 'content' + i;
        toolbar.appendChild(contentDiv);
    }

    // Append the toolbar to the body
    document.body.appendChild(toolbar);

    // Add the CSS styles
    const style = document.createElement('style');
    style.innerHTML = `
        #right-toolbar {
            position: fixed;
            right: 0;
            top: 0;
            width: 100px;
            height: 100%;
            background-color: #f8f8f8;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            z-index: 999;
        }
        #content1 .main_menu {
        	position: relative;
        }
        .toolbar-content {
            width: 80px;
            height: 100px;
            background-color: #f8f8f8;
            margin-bottom: 10px;
            border-radius: 5px;
            display: flex;
            justify-content: center;
            align-items: start;
        }

        .toolbar-content:last-child {
            margin-bottom: 0;
        }

        .rotated-logo {
            transform: rotate(90deg);
            transform-origin: center;
        }
        #content2 .logo {
        float: none;
        position: relative;
    		left: unset;
    		height: unset;
        }
        #content3 .social_bookmarks {
            /*transform: rotate(90deg);*/
            transform-origin: center;
        }
        
        .html_header_top.html_header_sticky #main {
    		padding-top: 0;
				}
				#av_section_1 {
				    height: 100vh;
				}
				#menu-item-shop,#menu-item-search {
				display: none;
				}
				#top #content1 .av-small-burger-icon {
    		transform: scale(1);
				}
				.html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child {
				    padding-right: 0;
				    margin-right: 0;
				}
				.avia-menu.av_menu_icon_beside {
			    padding-right: 0;
			    margin-right: 0;
			    border-right-width: 0;
			    border-right-style: none;
				}
				.html_av-overlay-side-classic #top .av-burger-overlay li a {
    			border-bottom-style: none;
				}
				@media only screen and (min-width: 768px) {
				  .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main {
				      display: block!important;
				  }
				  #top #content1 .av-main-nav > li.menu-item  {
				    display: none!important;
				  }
					.html_av-overlay-side #top .av-burger-overlay li {
   					 margin: 0;
 				   height: 50px;
					}
				  #content1 .av-main-nav-wrap {
				      float: right;
				  }
				}
				#header {
					visibility: hidden;
				}
				body {
				margin-right: 100px
				}
				#content3 {
				height: 300px;	
				}
				#top .social_bookmarks li {
 				 display: inline-block;
 				 clear: both;
  				margin-bottom: 10px;
				}
    `;
    document.head.appendChild(style);

    // Move the logo to #content2 and rotate it
    const logo = document.querySelector('.avia-standard-logo');
    if (logo) {
        const content2 = document.getElementById('content2');
        content2.appendChild(logo);
        logo.classList.add('rotated-logo');
    }

    // Move the menu to #content1
    const menu = document.querySelector('.main_menu');
    if (menu) {
        const content1 = document.getElementById('content1');
        content1.appendChild(menu);
    }

    // Move the social bookmarks to #content3
    const socialBookmarks = document.querySelector('.social_bookmarks');
    if (socialBookmarks) {
        const content3 = document.getElementById('content3');
        content3.appendChild(socialBookmarks);
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );

Best regards,
Mike