Hi,

Try to wrap the css modification inside this css media query so that it won’t affect the mobile view.

@media only screen and (min-width: 768px) {
/* Add your Desktop Styles here */

}

And to be able to target specific elements in the page, try to apply a unique ID or class names to them.

— https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael

Hey M-Graphics24,

Thank you for the inquiry.

1.) The footer menu doesn’t look bold when we checked. Did you figure this out?

2.) The footer columns have the same size (29% of the parent container) and is equally spaced — 6% left margin.

3.) One of the css media queries was not closed properly. We corrected the css code.

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

Hi,

To target all top level menu items, please use this css code:

.html_av-overlay-side #top #wrap_all #av-burger-menu-ul .menu-item-14632 > .sub-menu > li > a {
    color: black;
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for sharing the complete steps. Regarding the older thread, the complete solution is already there; you just need to adjust the “std” parameter to “hover_active”.

remove_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements', 500, 1 );
add_filter( 'avf_builder_elements', 'avia_woocommerce_product_elements_mod', 500, 1 );

function avia_woocommerce_product_elements_mod( $elements )
{
	$posttype = avia_backend_get_post_type();

    if( ! empty( $posttype ) && $posttype == 'product' )
    {
        $elements[] = array("slug"	=> "avia_product_hover",
            "name" 	=> "Hover effect on <strong>Overview Pages</strong>",
            "desc" 	=> "Do you want to display a hover effect on overview pages and replace the default thumbnail with the first image of the gallery?",
            "id" 	=> "_product_hover",
            "type" 	=> "select",
            "std" 	=> "hover_active",
            "class" => "avia-style",
            "subtype" => array("Yes - show first gallery image on hover" => 'hover_active', "No hover effect" => ''));

        $counter = 0;
        foreach( $elements as $element )
        {
            if( $element['id'] == 'sidebar' ) 
			{
				$elements[ $counter ]['required'] = '';
			}
            else if( $element['id'] == 'layout' ) 
            {
	            $elements[ $counter ]['builder_active'] = true;
	           // unset($elements[$counter]);
            }
            $counter++;
        }
    }

	return $elements;
}

Best regards,
Ismael

Hey!

is not very logically structured if it is not sorted by date,

Yes, the Isotope script doesn’t really take any of that information into account. It sorts the items based on their order in the document and the size of the images. If you want to make sure that items are sorted based on their query order, e.g., the date they were published, you may need to select a different layout in Styling > Masonry Settings > Size Settings or use an entirely different element, such as the Post Slider or Portfolio Grid.

Cheers!
Ismael

Hey dogsbody,
These icons are not available on Fontello.com yet, please follow this thread and steps. Please note that it is for TikTok and you will need to change the “charter code” (ue800) to your icons.

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

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

#barra-1 {
  border-top: 2px solid #56267a;
}

Best regards,
Rikard

Hey bur2000,

Thank you for the inquiry.

Unfortunately, it’s not possible to control the order of the items in the grid, especially when the size of the images varies. The sorting is dynamically calculated by the Isotope script, which is also used to sort the items by category. Have you tried using multiple Masonry elements?

Best regards,
Ismael

Hi!

You can add the filter in the functions.php file. This will sort the items based on the value of the Page Order field. You will have to enable this field manually for the portfolio items.

— https://kriesi.at/support/topic/masonry-not-displaying-cover-pictures/#post-1439624

Cheers!
Ismael

Hi,

Try to add this code in the functions.php file to add a custom sales badge above the product image.

add_filter('woocommerce_sale_flash', 'avf_woocommerce_sale_badge', 10, 3);
function avf_woocommerce_sale_badge($badge, $post, $product) {
    if ($product->is_on_sale()) {
        return '<span class="av-custom-sale-badge">Sale!</span>';
    }
    return $badge;
}

Then apply this css code:

.av-custom-sale-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #7E9A47;
    color: white;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 10;
}

Best regards,
Ismael