Hi,

Thank you for the update.

To temporarily fix the overlap issue, please add this css code:

.av_seperator_small_border .av-main-nav > li > a > .avia-menu-text {
    margin-left: 0;
}

.av_seperator_small_border .av-main-nav > li:not(.av-menu-button) > a > .avia-menu-text {
    margin-left: -13px;
}

And to change the font, please go to the Enfold > Advanced Styling panel and edit the Main Menu > Main Menu Links element.

Best regards,
Ismael

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

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 Ivana,

Thank you for the inquiry.

The icon is not yet available but you can manually add it by uploading this zip file to the Enfold > Import/Export > Iconfont Manager.

// https://1drv.ms/u/s!AjjTfXSRbKTvguM8owBR5qH5aci6dw?e=ylqhfA

Then add this code in the functions.php file:

// Register new icon as a theme icon
function avia_add_custom_icon($icons)
{
    $icons['threads'] = array('font' => 'threads', 'icon' => 'ue800');
    return $icons;
}
add_filter('avf_default_icons', 'avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons)
{
    $icons['Threads'] = 'threads';
    return $icons;
}
add_filter('avf_social_icons_options', 'avia_add_custom_social_icon', 10, 1);

You should now be able to add the new social icon from the Enfold > Social Profiles panel. Please check the links below for more info:

// https://kriesi.at/documentation/enfold/icon/#adding-your-own-fontello-or-flaticon-icons-
// https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options

Best regards,
Ismael

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

Hey Peter,
I will try, in my example I wanted to use a menu created in WordPress, so first create a menu and save the menu name for the function code later:

For the logo we will add the image via css so you will need to add the custom classes button logo

For the CTA we add the classes button cta:

Then on the page you want to use this use the option Hide Header on this page:

and add the shortcode [custom_menu menu=”test menu with logo”] to your page, adjust the menu name to suit.
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function display_custom_menu($atts) {
    $atts = shortcode_atts(
        array(
            'menu' => '',
        ), 
        $atts, 
        'custom_menu'
    );
    $menu = $atts['menu'];
    if (!empty($menu)) {
        $args = array(
            'menu' => $menu,
            'container' => false, 
            'menu_class' => 'av-main-nav scmenu',
            'echo' => false
        );
        $menu_html = wp_nav_menu($args);
        $output = '<header id="header" style="position: absolute; top: 0;">';
        $output .= '<nav class="main_menu" style="display: flex; align-items: center; justify-content: center; width: 100%;">';
        $output .= $menu_html;
        $output .= '</nav>';
        $output .= '</header>';
        return $output;
    } else {
        return '<p>No menu specified or menu not found.</p>';
    }
}
add_shortcode('custom_menu', 'display_custom_menu');

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_menu ul.scmenu {
list-style: none;	
}
#top #wrap_all .main_menu .scmenu .menu-item a {
	color: var(--enfold-header_replacement_menu_color);
}
#top #wrap_all .main_menu .scmenu {
background-color: rgba(0, 0, 0, 0.2);
}
body:not(.wp-admin) li.button.logo {
background-image: url(/wp-content/uploads/2024/07/logo_fysiotherapie_groningen.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
width: 200px;
margin-left: 0;
}
body:not(.wp-admin) li.button.logo a {
opacity: 0;
}
#top #wrap_all .main_menu .scmenu .button.menu-item.cta {
	background-color: orange;
}

and adjust the image URL to suit
The expected results should be like this when a color section with a image is used:

Best regards,
Mike

Hey Ad-Min747,
I assume that your user is not admin, so see the theme option at Enfold Theme Options ▸ Layout Builder ▸ Lock Advanced Layout Builder
This removes the ability to move or delete existing template builder elements, or add new ones, for everyone who is not an administrator.
Another option might be this function in your child theme functions.php file in Appearance ▸ Editor to hide the ALB button from anyone that is not admin.

add_action('admin_head', function() {
	if( !current_user_can('activate_plugins') ){
            ?>
             <style>#avia-builder-button{ display: none; } </style>
            <?php
        }
});

Best regards,
Mike

Hi,

For 6.0 I added filter avf_form_datepicker_args that allows to change all arguments. See https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/ALB%20Elements/Contact%20Form/avf_form_datepicker_args.php

@Guenni007

today button

This is the default behaviour of this element.

Best regards,
Günter

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

Hey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>

then in the post sidebar you will see a “Go Back” link

you can style it as you wish and clicking it will send the visitor to the last page they viewed.
If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link: javascript:history.back()

[av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']

Best regards,
Mike

Hey Aubin,

Thank you for the inquiry.

1.) Please ask your hosting provider to create a site backup or restore point prior to changing your WordPress site’s URL from non-www to www. After creating a site backup, follow the steps below:

– Log in to your WordPress admin dashboard.
– Navigate to Settings > General.
– Update the URLs:
— In the “WordPress Address (URL)” field, change your URL from http://example.com to http://www.example.com.
— In the “Site Address (URL)” field, change your URL from http://example.com to http://www.example.com.
– Save Changes:
— Scroll down and click the “Save Changes” button.
– Update .htaccess File (optional but recommended for SEO and redirecting):
— Access your website’s files via FTP or the hosting file manager.
— Locate and edit the .htaccess file in your website’s root directory.
— Add the following code to redirect non-www to www:
`
# Redirect non-www to www
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com [NC]
RewriteRule ^(.*)$ http://www.example.com/$1 [L,R=301]
`
— Replace example.com with your actual domain name.
– Clear Your Cache:
— Clear your browser cache and any caching plugins you might be using.
– Verify the Changes:
— Check your website to ensure it loads correctly with the www prefix.
– You may need to update the DNS records if necessary. Please ask your hosting provider about this before proceeding.

2.) Are you using the WooCommerce plugin? The product page should have filter or sorting options by default if you’re using the plugin. Please check the documentation below for more info.

3.) You will have to install a plugin such as WPML or Polylang in order to create a multilingual site or add a language switcher. Please check the links below:

// https://wpml.org/documentation/theme-compatibility/enfold/
// https://wpml.org/tutorials/2016/02/enfold-theme-and-wpml/

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hey northorie,
Thanks for the link to your site, I see that you have a Advanced Layout Builder (ALB) post that has been saved as a WordPress Block Editor post, to correct click the ALB editor button and then save again and edit in the ALB editor.

Best regards,
Mike

Hi,
To me your example page the popup:

is the same as our lightbox popup examples, I think this solution would be the best one to follow, it uses buttons but with a minor adjustment it could use plan text links, you can see that the popup has the “X” to close, in the screenshot there is only two words, but you can add as much text as you like:

In your example page there are five links and popups:

Are you going to use this in the same way? If so how many popups do you want to use?

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling:

#top .avia-button:hover .avia_button_background {
  opacity: 0;
}

Best regards,
Rikard

Hey amyncuih,

Thank you for the inquiry.

You can adjust the default style of the Button elements in the Enfold > Advanced Styling panel, or you can use this css code:

#top #wrap_all .main_color .avia-button {
    color: red;
}

Best regards,
Ismael

Hi,
To make the logo link smaller for mobile try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 480px) { 
#top.page-id-11754 #header_main .logo {
	width: 60px;
	max-width: 60px;
}
}

but it also looks like you will need to make the button in the slider come to the fore ground with z-index, try around 99
I have not used the revolution sliderI’m not sure where this setting is, perhaps you do, or try checking the revolution slider documentation.

Best regards,
Mike

Hey amyncuih,

Thank you for the inquiry.

You can define a different font for the Button element in the Enfold > Advanced Styling panel. The Button element can be found under the Misc section. Please note that this will affect all buttons across the site. Unfortunately, you cannot assign a different font to a specific block in the builder.

Best regards,
Ismael