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

Hey Harry,

This is likely a plugin conflict, please try to deactivate all plugins to see what happens after that. Also make sure that you are running the latest version of the theme (6.0.2): https://kriesi.at/documentation/enfold/theme-update/

Best regards,
Rikard

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#av-burger-menu-ul .menu-item-2029 {
  margin-bottom: 10px; 
}

#top .av-menu-button > a .avia-menu-text {
  border-radius: 5px;
}

Best regards,
Rikard

Hey Clemens,

I see that you are running an old version of the theme, could you try to update to the latest version (6.0.2) to see if that helps please? The update to 6.0.2 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/theme-registration/

Best regards,
Rikard

Hey Aidan,

We are not a web agency, we develop a WordPress theme called Enfold which enables users to create their own sites. You can buy it here: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990

Best regards,
Rikard

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,
Please see our documentation about using a Child Theme, I see that you have three versions of the theme installed, I assume that you added each into a different directory, is that how you did it?
Updating the theme is not that important right now, we can move forward with just a staging site.

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

Hey dataminegroup,

Thank you for the inquiry.

Did you extract the enfold.zip file from the package before uploading it? Please check the links below for more information on how to properly install and update the theme.

// https://kriesi.at/documentation/enfold/theme-update/#update-via-ftp
// https://kriesi.at/documentation/enfold/install-enfold-theme/#back-up-your-work
// https://kriesi.at/archives/the-complete-guide-to-updating-enfold

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The plugin allows you to configure the title and meta for each post type in the Rank Math SEO > Titles & Meta panel. In version 6.0, Enfold added two custom post types called alb_elements and alb_custom_layout. If you want to remove these tabs, you can add the following code to your functions.php file:

add_filter( 'rank_math/settings/title', function( $tabs) {
    unset($tabs['post-type-alb_elements']);
    unset($tabs['post-type-alb_custom_layout']);
    return $tabs;
});

Best regards,
Ismael

Hey isynergy,

Thank you for the inquiry.

This is possible, but you have to directly modify the /enfold/includes/loop-index.php file and add this code around line 504:

$featured_image = get_the_post_thumbnail($the_id, 'thumbnail', array('class' => 'read-more-thumbnail'));
		echo '<div class="featured-image-container">' . $featured_image . '</div>';

Above this code:

echo $close_header;

Then, add this css code to move the image to the right.

.featured-image-container {
    float: right;
}

Best regards,
Ismael3

Hi,

Thank you for the info.

Looks like the font is already selected for the main menu in the Enfold > Advanced Styling panel. Is that correct?

.main_menu .avia-menu-text {
    font-family: 'Seymour One' !important;
}

Best regards,
Ismael

Hey Dameon,

Thank you for the inquiry.

You may need to set the Enfold > Shop Options > Product gallery settings to the second option (Woocommerce 3.0 gallery). Let us know if this helps.

Best regards,
Ismael

Hi,
I’m glad that you have talked to your developer and learned the placement of the PHP function to execute shortcode like [av_layerslider id=…], but when I checked enfold/config-templatebuilder/avia-template-builder/template-builder.php I didn’t find it, nonetheless this is the type of PHP code that I was talking about.
It is ok though, I don’t need to see the code used because I would rewrite it to be added to the WP Code plugin, unless you choose to add a Child Theme so the PHP code will be different and you won’t have this issue in the future when you update. There is no additional charge for this, please let us know when the staging site is created.
Please note that I was recommend that you update the theme to v6.0.2 not updating the LayerSlider plugin, it is bundled into the theme, so you can only update the theme.
For reference please see our LayerSlider documentation here.

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