Hey amyncuih,

Thank you for the inquiry.

You may need to edit the enfold/includes/loop-index.php file and add the button below this code, around line 547:

//share links on single post
avia_social_share_links_single_post();

Or use the ava_after_content hook in the functions.php file:

add_action('ava_after_content', function() {
    // add button here
}, 10);

Best regards,
Ismael

Hi,

You can create a new thread by clicking this button on the Enfold sub forum: https://imgur.com/a/AnoSPNb, or use this link.

Best regards,
Rikard

Hey Helmut,

You can start a new thread by clicking the big blue button at the very top of the Enfold sub forum.

Best regards,
Rikard

Hey lucybb2,
Thank you for your patience and the login, I see your CPT “Journal” do not have a ALB builder field, I believe that this is because your CPT is not enabled in the theme. Typicality you would enable Enfold Theme Options > Layout Builder > Show advanced options

Then add your CPT to Activate Your Custom Post Types For ALB

and now the ALB button shows in your CPT:

and now you can add elements to the page:

I did the steps above for you, please check.

Best regards,
Mike

Hey Alan,

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

.avia_ajax_form .button {
  background: #000;
  color: #fff;
}

.avia_ajax_form .button:hover {
  background: #D4AF37;
}

Best regards,
Rikard

Hi,
Thank you for your patience, as I review your request, I believe the only issue right now is switching to the built-in mobile menu before the custom menu becomes too large for the screen, so originally I have said to use the option <strong style=’color:#000′>Hide Header on this page but this also hides the mobile menu, so lets change this to <strong style=’color:#000′>Transparent Header

and hide the header with css:

@media only screen and (min-width: 990px) { 
	#header_main {
		display: none;
	}
}
@media only screen and (max-width: 989px) { 
	.avia_codeblock > #header {
		display: none;
	}
	#menu-item-shop, .responsive.html_mobile_menu_tablet #top .av-logo-container .main_menu .social_bookmarks {
		display: none;
	}
	#av-burger-menu-ul .button.logo {
		display: none;
	}
	.logo a {
		 display: flex;
    align-items: center;
	}
	#header_main {
		background-color: #000;
	}
}
@media only screen and (max-width: 989px) { 
  .responsive #top #main {margin-top: -90px!important;}
  #top #wrap_all .av_header_transparency {background-color: transparent!important;}
  div#header_main > .container {display: block !important;}
  #top .av-burger-overlay li li .avia-bullet, #top .av-hamburger-inner,#top .av-hamburger-inner::before, #top .av-hamburger-inner::after {
  background-color: #fff !important; 
  }
  .html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::before, .html_av-overlay-side.av-burger-overlay-active #top .av-hamburger-inner::after {
  background-color: #000 !important; 
  }
  }

and for my example menu it breaks around 914px so setting the mobile menu to show at 990px in the theme setting will solve this, and I set the <strong style=’color:#000′>Alternate Menu For Mobile to the same menu we used for the shortcode:

So now at 990px and above it looks like this:

and below 989px the mobile menu shows like this:

and when the menu is open:

I believe this is what you are trying to achieve, I linked to my example page below for you to check.

Best regards,
Mike

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