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

Hi,
To add the classes to the menu items, first enable them in the drop down at the top of your menu screen “Screen Options” and checking the CSS Classes box, which will show the classes to the menu items.

I added the shortcode in a code block element, in a color section so the page would have a full image background, but you could add the code block element to the top of your page.

Best regards,
Mike

Hi,
Glad Rikard 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

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

.togglecontainer p.toggler {
	border-top: 1px solid #000 !important;
	border-bottom: 1px solid #000 !important;
}

Best regards,
Mike

Hi,
Thank you for your patience, I believe that your current version 5.01 had an issue back when it was released, and as I recall you will need to manually update it, and now that you have a working Token future updates will update correctly.
To update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

Best regards,
Mike

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

.av_toggle_section .toggle_icon:before {
	content: url(https://test.w-bullinger.com/WB-Reader-Arrow.svg);
}
.av_toggle_section .activeTitle .toggle_icon:before {
	content: url(https://test.w-bullinger.com/WB-Reader-X.svg);
}
.av_toggle_section .toggle_icon {
	border:none;	
}
.av_toggle_section .toggle_icon .vert_icon,
.av_toggle_section .toggle_icon .hor_icon {
	display:none;
} 

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

Best regards,
Mike

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

.container_wrap {
    border-top-style: none;
}

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

Best regards,
Mike

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

:root :where(a:where(:not(.wp-element-button))) {
    text-decoration: none;
}

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

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