Hi,
kwanumzen108 it looks like you have pasted theme shortcode into a text element, but you have extra HTML before and after the shortcode, typically this will cause breaks:


sometimes this occurs when a page is saved as a default WordPress builder page, and then converted back again.
cws0827 I’m not sure what you mean by scenery theme package, please open a new thread with the url to the page in question and an admin login so we can be of more assistance. It gets confusing when we are working on more than one site per thread. Thanks for understanding.

Best regards,
Mike

Hi,
Glad to hear, we will close this then, thanks for using Enfold.

Best regards,
Mike

Hi,
I would need to see the page to see why it’s not working.

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

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

#socket #avia3-menu .avia-menu-text {
	color: #000;
}
#socket #avia3-menu .avia-menu-text:hover {
	color: #ccc;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
There is no limit to the page size, but unfortunately access is still blocked.
Have you tried to disable all of your plugins, this could be a plugin conflict.

Best regards,
Mike

Hi,
Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?

Best regards,
Mike

Hey navindesigns,
Thank you for the link to your site, it looks like the burger menu color is black on a black header background, so it is not seen, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to make it white:

.header_color .av-hamburger-inner, .header_color .av-hamburger-inner::before, .header_color .av-hamburger-inner::after {
    background-color: #fff;
}

For the table height, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_table_script() { ?>
  <script>
(function($){
  $(window).load(function(){
  	$('.page-id-2333 .avia-pricing-table-container').each(function(){  
     var $columns = $('.pricing-table',this);
     var maxHeight = Math.max.apply(Math, $columns.map(function(){
         return $(this).height();
     }).get());
     $columns.height(maxHeight);
});
});
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_table_script', 99 );

and this css in your Quick CSS:

.page-id-2333 .pricing-table li.empty-table-cell {
    display: block;
}
.page-id-2333 .avia-pricing-table-container .pricing-table li:nth-child(6) {
	height: 62px;
}

Best regards,
Mike

Hey dweddell,
Thank you for the link to your site, but I didn’t find the jQuery code on your page or the console.log messages, are you sure that you added it to your functions.php file?

function toggle_on_click() {
?>
<script>
jQuery(window).on('load', function(){

jQuery(".toggle-button a").on("click", function(e) {
	console.log(" toggle section");

	jQuery("#toggle-section").toggleClass("hide-me");

	console.log(" Prevent default ");

	e.preventDefault();

});
});
</script>
<?php 
}
add_action('wp_footer', 'toggle_on_click');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
If you did, please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
I’m not seeing this this on my Mac, but you could try adding this css:

.togglecontainer * {
	border-left: none;
	border-right: none;
	border-left-color: transparent !important;
  border-right-color: transparent !important;
}
.togglecontainer .av-inherit-border-color {
	border-left-color: transparent !important;
  border-right-color: transparent !important;
}

then clear your browser cache, Please note that testing with Safari 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

Hi,
Try this HTML:

<div class="nav-container">
<div class="navigation">
<a href="#" class="nav-link left-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Left.svg" alt="Left"></a>
<a href="#" class="nav-link close-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-X.svg" alt="close"></a>
<a href="#" class="nav-link right-link"><img src="https://w-bullinger.com/wp-content/uploads/2024/06/WB-Nav-Arrow-Right.svg" alt="Right"></a>
</div>
</div>

and this css:

.nav-container {
    display: flex;
    justify-content: center;
    align-items: center;
}
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 300px;
}

.nav-button, .nav-link {
    display: inline-block;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f0f0f0;
    color: #333;
}

.nav-button:hover, .nav-link:hover {
    background-color: #e0e0e0;
}

.nav-link img {
    width: 20px; /* Adjust the size of the image icon */
    height: 20px;
}

For this result

Best regards,
Mike

Hi,
Thank you for the link to your site and the screenshot, I don’t know what the plugin style is meant to look like, but from your screenshot it looks like the border around the elements is the issue. I don’t think that disabling the theme style would be a good solution as I doubt the plugin includes the css required for all of the elements on the checkout page.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field to remove the borders and slightly adjust a couple of elements for a better view:

.woocommerce-checkout td,
.woocommerce-checkout tr th:first-child, 
.woocommerce-checkout tr td:first-child,
.woocommerce-checkout tr:first-child th, 
.woocommerce-checkout tr:first-child td,
.woocommerce-checkout .flux-checkout__content-right #order_review tr.cart_item td, 
.woocommerce-checkout .flux-step #order_review tr.cart_item td {
    border: none;
}
.woocommerce-checkout div table.shop_table td {
    padding: 0;
}
.woocommerce-page .button {
    margin: 0;
}
.woocommerce form p.form-row input[type=text]#coupon_code {
	padding-right: 0;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-last {
    width: 41%;
}
.woocommerce-page .coupon-form td .checkout_coupon.woocommerce-form-coupon p.form-row-first {
    width: 50%;
}

Please see the screenshot in the Private Content area of the expected results.

Best regards,
Mike

Hey Advantage09,
Thank you for your patience and the link to your site, but the W3 Validator is not the same as a WCAG Validator.
Often when I check the W3 Validator gives false errors, such as Error: No p element in scope but a p end tag seen. when you check the source code the “p” tage is there:

As for the role=tablist issue, when I check your site on a WCAG Validator this is not flaged, as I understand the tab element can be in the tabpanel element.
On May 7 the Dev Team made some adjustment to this to be compliment with the European Accessibility Act (EAA) documentation, and this is outside my expertise, but since the WCAG Validator is not flaging this it would seem that this is correct.
If you wish I can ask this on the Dev Team Github thread

Best regards,
Mike

Hi,
You can replace color: var(–enfold-header_replacement_menu_color); with a color, no problem.
The word “logo” should be hidden by the css, I would have to see the page.
There is no animation built in to it, your example menu has no animation.
Your example menu changes to a different style at smaller screens, I only looked at the desktop version.

Best regards,
Mike

Hi,
Glad Ismael could 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