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

#top .av-masonry-entry .av-inner-masonry-content {
	padding: 20px 0;
}

to remove the left and right padding of the excerpt, after applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Jak73,
Add the page ID to the css like this:

.html_header_top.html_header_sticky.html_large .page-id-1616 #main {
padding-top: 66px;
}

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

Best regards,
Mike

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 your patience and the link to your site, I believe that I have found your magazine element on the page, please see the screenshot in the Private Content area, but I believe that the top item IN: Ongestructureerde data OUT: Gestructureerde info is the latest item, based on the date 27/07/2024 and the parent page /mdhai/ai-artikelen/
Perhaps I misunderstand, please let us know which item that you expect to show first and include a admin login in the Private Content area so we can examine the backend closer.

Best regards,
Mike

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

#top #wrap_all #main.all_colors h1, #top #wrap_all #main.all_colors h2, #top #wrap_all #main.all_colors h3, #top #wrap_all #main.all_colors h4, #top #wrap_all #main.all_colors h5, #top #wrap_all #main.all_colors h6 {
    text-transform: capitalize;
}

After applying the css, please clear your browser cache and check.
If this doesn’t help please link to your site so we can examine.

Best regards,
Mike

Hey Markus,
Thank you for the link to your site, for the tab content width, it looks like you have this custom css:

.av-layout-tab-inner {
    margin-right: 20% !important;
    margin-left: 1% !important
}

please remove it, and add this css instead:

.responsive .av-layout-tab-inner > .container {
	padding: 0;
	max-width: 95%;
}

To have a line under the tabs instead of an arrow, add this CSS:

.avia_transform .av-tab-arrow-container span {
  left: 0;
  width: 100%;
  transform: none;
}
.av-active-tab-title .av-tab-arrow-container {
	top: -9px;
}
.av-inner-tab-title, .av-tab-arrow-container, .av-tab-section-icon, .av-tab-section-image {
   width: 100%;
}

this also increases your tab width so some of your tab titles are not over two lines.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

If you have any further question which is not on the original topic, then please open a new thread. Also please let us know what the error message says in english, and how to reproduce it.

Best regards,
Rikard

Hey bemodesign,
I checked your pages but I didn’t find an example of images with a border-radius, but when I review your past threads it looks like you wanted a border-radius of 30px, so for this on your shop images try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

 #top .av-product-class-minimal img {
    border-radius: 30px;
}

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

Best regards,
Mike

Hey Jak73,

Thank you for the inquiry.

The issue occurs because the page is set to have a transparent header. In this setup, the header normally covers the top part of the main container. You may need to add a Separator/Whitespace element above the Text Block containing the custom menu to push the element further away from the header.

Best regards,
Ismael

Hey Richard,

Thank you for the inquiry.

Please provide the site URL or a direct link to the page containing the Masonry element so that we can check them. A screenshot will also help.

If you need to adjust the background of the masonry content, please try this css code:

#top .av-inner-masonry-content {
    background: transparent;
}

Best regards,
Ismael

Hi,

Thank you for the update.

We’re seeing a few jQuery errors which might be related. Did you add this script?

        <script type="text/javascript">
            jQuery(function($) {
                jQuery('.dropdown_product_cat').on('change', function() {
                    if (jQuery(this).val() != '') {
                        var this_page = '';
                        var home_url = 'https://www.site.com.au/';
                        if (home_url.indexOf('?') > 0) {
                            this_page = home_url + '&product_cat=' + jQuery(this).val();
                        } else {
                            this_page = home_url + '?product_cat=' + jQuery(this).val();
                        }
                        location.href = this_page;
                    } else {
                        location.href = 'https://www.site.com.au/4x4-accessories-shop/';
                    }
                });
                if (jQuery().selectWoo) {
                    var wc_product_cat_select = function() {
                        jQuery('.dropdown_product_cat').selectWoo({
                            placeholder: 'Select a category',
                            minimumResultsForSearch: 5,
                            width: '100%',
                            allowClear: true,
                            language: {
                                noResults: function() {
                                    return 'No matches found';
                                }
                            }
                        });
                    };
                    wc_product_cat_select();
                }
            });
        </script>

I have installed YITH WooCommerce Product Add-ons & Extra Options

You might have set up the product page while this plugin was enabled, so when you disabled the plugin, the custom variation switches stopped working. Why did you disable the plugin?

Another issue with variable product is When I select any make and the second select box should show variations with respect to the selected Make,

How did you create the variations? Image switching should work when Enfold > Shop Options > Product Gallery is set to the second option (WooCommerce 3.0 gallery). Also, the product variations should be set up as described in the documentation below.

// https://woocommerce.com/document/variable-product/#adding-a-variable-product

Best regards,
Ismael

Hey Richard,

Thank you for the inquiry.

The social icons in the socket container were already white when we checked. To adjust the size, please add this css:

#top #socket .social_bookmarks li a {
  float: left;
  width: 50px;
  line-height: 50px;
  min-height: 50px;
  font-size: 30px;
}

#top #socket .social_bookmarks {
  height: 50px;
}

Best regards,
Ismael

Hi,
I added this css to your Quick CSS:

#top #header .avia_mega_div .sub-menu .avia_mega_text_block a {
    text-decoration: none;
    font-size: 12px; 
}
#top #header .avia_mega_div .avia_mega_text_block .avia-bullet {
    margin-top: 10px;
    left: -8px;
}

please clear your browser cache and check.

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,

Try changing this media query to 990 as well:

@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .av-logo-container {
    height: 50px;
    line-height: 50px;
  }
}

Best regards,
Rikard

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,

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

Hey Jak73,

You can simply change the values in your media queries, like this:

@media (min-width: 600px) and (max-width: 767px) {
  .avia-image-container.gallerie-image img {
    max-height: 450px;
    margin-top: 35px !important;
    margin-bottom: 18px;
  }
}

Could be made to apply to larger screens like this:

@media (min-width: 600px) and (max-width: 990px) {
  .avia-image-container.gallerie-image img {
    max-height: 450px;
    margin-top: 35px !important;
    margin-bottom: 18px;
  }
}

Best regards,
Rikard

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,

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,

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