Hi,
Thank you for your patience, I tested this by editing the file \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\tab_section\tab_section.php lines 568-569 as above:

$atts['initial'] = 0;
	$active_tab = $i == $atts['initial'] ? 'av-active-tab-title no-scroll' : '';

on our demo and found that the tab section inner container shows as an empty section because the content is in the div just off the screen, so I wrote a script that changes the display of the inner container to none if no tab titles have the active class. Try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_check_for_active_tab_title() { ?>
    <script>
(function($){
	setTimeout(function(){
    if ($('#plugins .av-tab-section-tab-title-container').children('a[aria-controls^="av-tab-section"].av-active-tab-title').length === 0) {
    	$('#plugins .av-tab-section-inner-container').css({"display": "none"});
    }
	},300);
	 $('#plugins a[aria-controls^="av-tab-section"]').on('click', function() {
	 	setTimeout(function(){
	 	if ($('#plugins .av-tab-section-tab-title-container').children('a[aria-controls^="av-tab-section"].av-active-tab-title').length > 0) {
    	$('#plugins .av-tab-section-inner-container').css({"display": "block"});
    }	
	 	},300);
	 });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_check_for_active_tab_title');

You will note in the script I used the ID #plugins, this was the ID of the section I tested on, you can remove it, but I recommend changing it to an ID you will use for this section on your site so the script doesn’t affect other sections.
You will also note that I had to use a setTimeout because the class is added after the DOM so we have wait a little bit. 300ms.

Best regards,
Mike

Hi,
Sorry for the very late reply and thank you for your patience, I read through this thread and believe that now you are using v4.8.6.2 and have removed your custom css, I checked your homepage masonry at mobile & tablet, screenshots below, and the gaps and spacing seems correct. I also checked your /projects/ page and it seems that this issue is resolved, please check and let us know if we should close this thread.

Best regards,
Mike

Hi,
For each column you can add an ID or a class and create a rule for each, this example uses custom classes to add a green and red overlay to two columns:

.avia-link-column-overlay {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.red-overlay > .avia-link-column-overlay {
    background: rgba(255,0,0,0.5);
}
.green-overlay > .avia-link-column-overlay {
    background: rgba(0,255,0,0.5);
}

Please give this a try, if you have trouble please link to a test page.

Best regards,
Mike

Hi,
Thank you for your patience, it sounds like the theme may have not ever been updated and if it is a version from 2017 on a WordPress version 5+ it probably won’t work correctly, but this is a guess with a lot of “IFs”, basically the theme is not domain or host dependent, so you could move it from domain to domain, server to server, with no issues.
Enfold is at version 4.8.6.2 now, if yours is not up to date try downloading the latest one from your Theme Forest account, and delete the one on your server and then upload the new one via FTP, please don’t try overwriting the theme via FTP as it will leave old files behind and cause errors.

Best regards,
Mike

Hey xela,
Thank you for your patience and the link to your example, this turns out to be a little more involved than it first looks, but if you are only going to have a few menu items that will fit in a single row, such as 5, with no sub-menu items, then you could try this css:

.html_av-overlay-side #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a,
.html_av-overlay-side #top #wrap_all .av-burger-overlay #av-burger-menu-ul li {
    display: inline;
}
.html_av-overlay-side-classic #top .av-burger-overlay #av-burger-menu-ul li a {
    border: none;
}
#header_main .av-burger-overlay {
    height: 225px;
}

#top #header_main #av-burger-menu-ul {
    display: block;
    height: 125px;
    padding: 125px 0;
}
.html_av-overlay-side .av-burger-overlay-scroll{
	width:100% !important;
	transform: none!important;
	transition: none!important;		
}
 html.av-burger-overlay-active #top #header_main .social_bookmarks, span.logo {
	z-index: 200;
}

this is the result, it is a gif so you may need to click to play:

For a larger menu with sub-items or a better solution, you may wish to look for a menu plugin.

Best regards,
Mike

Hey thomasgafo,
Thank you for your patience and the link to your site and screenshot, this can be done with this css code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

@media only screen and (max-width: 767px) {
	#wrap_all > #main > .sticky_placeholder {
		height: 0!important;
	}
	.responsive #top #sub_menu1.av-switch-768 .av-menu-mobile-active .av-subnav-menu {
		display: block;
	}
}

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

Best regards,
Mike

Hi,
I did some more testing with BigCommerce on my test site and found that it is forcing the function “WC” to fake a WooCommerce check.
In the file \wp-content\plugins\bigcommerce\src\BigCommerce\Compatibility\woocommerce-functions.php on lines 16-21 you will find this:

if ( ! function_exists( 'wc' ) ) {
	function wc() {
		$container = bigcommerce()->container();
		return $container[ Compatibility::WC_FACADE ];
	}
}

this code means that when WooCommerce (‘WC’) is not activate, to add it anyways, thus our theme then thinks it’s active and add our customizations which then causes a conflict, for which I would argue that it is BigCommerce that is in conflict and not our theme.
Anyways, I tested by commenting out these lines like this:

//if ( ! function_exists( 'wc' ) ) {
//	function wc() {
//		$container = bigcommerce()->container();
//		return $container[ Compatibility::WC_FACADE ];
//	}
//}

and it solved the blog post issue on my test site, but in the file the are 21 further functions that fake known WooCommerce functions such as wc_get_template, woocommerce_mini_cart, wc_get_cart_url, wc_get_checkout_url and many more, these may all be future conflicts for which I would recommend commenting out but it may break BigCommerce because it looks like the plugin is built with “borrowed” functions. You may wish to reconsider building a business with this plugin.

Best regards,
Mike

Hi,
Thank you for the screenshot, on the right side, when you hover over the scroll to top button the tooltip “Scroll to top” is created by the title attribute of the element by a browser function, to remove this you will need to remove the title of the element which can be done with the script, try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function remove_title_from_scroll_top_on_hover() { ?>
    <script>
(function($){
  $("#scroll-top-link").hover(function(){
    $(this).removeAttr("title");
  });  
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'remove_title_from_scroll_top_on_hover');

The link information on the left side is also from a browser function but it can not be hidden by the site as it is user side information only.

Best regards,
Mike

Hey katodicadesign,
Thank you for your patience and the mockup, one way to do this would be with a table element set to display tabular data, but it does have it’s limitations, I would use a html template with css rules for better control and styling options, for example I found this template and adjusted the css a little for this effect:

by placing this code in a code block element:

<style>
.timeline {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    margin: 0 auto;
    letter-spacing: 0.2px;
    position: relative;
    line-height: 1.4em;
    font-size: 1.03em;
    padding: 5px;
    list-style: none;
    text-align: left;
    max-width: 60%;
}
li.event {
	list-style: none;
}
@media (max-width: 767px) {
    .timeline {
        max-width: 98%;
        padding: 25px;
    }
}

.timeline h1 {
    font-weight: 300;
    font-size: 1.4em;
}

.timeline h2,
.timeline h3 {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 10px;
}

.timeline .event {
    border-bottom: 1px dashed #000;
    padding-bottom: 25px;
    margin-bottom: 25px;
    position: relative;
}

@media (max-width: 767px) {
    .timeline .event {
        padding-top: 30px;
    }
}

.timeline .event:last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
    border: none;
}

.timeline .event:before,
.timeline .event:after {
    position: absolute;
    display: block;
    top: 0;
}

.timeline .event:before {
    left: -207px;
    content: attr(data-date);
    text-align: right;
    font-weight: 100;
    font-size: 0.9em;
    min-width: 120px;
}

@media (max-width: 767px) {
    .timeline .event:before {
        left: 0px;
        text-align: left;
    }
}


@media (max-width: 767px) {
    .timeline .event:after {
        left: -31.8px;
    }
}

.rtl .timeline {
    border-left: 0;
    text-align: right;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    border-right: 3px solid #727cf5;
}

.rtl .timeline .event::before {
    left: 0;
    right: -170px;
}

.rtl .timeline .event::after {
    left: 0;
    right: -55.8px;
}
</style>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Timeline</h6>
                    <div id="content">
                        <ul class="timeline">
                            <li class="event" data-date="12:30 - 1:00pm">
                                <h3>Registration</h3>
                                <p>Get here on time, it's first come first serve. Be late, get turned away.</p>
                            </li>
                            <li class="event" data-date="2:30 - 4:00pm">
                                <h3>Opening Ceremony</h3>
                                <p>Get ready for an exciting event, this will kick off in amazing fashion with MOP & Busta Rhymes as an opening show.</p>
                            </li>
                            <li class="event" data-date="5:00 - 8:00pm">
                                <h3>Main Event</h3>
                                <p>This is where it all goes down. You will compete head to head with your friends and rivals. Get ready!</p>
                            </li>
                            <li class="event" data-date="8:30 - 9:30pm">
                                <h3>Closing Ceremony</h3>
                                <p>See how is the victor and who are the losers. The big stage is where the winners bask in their own glory.</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

you will note that the css is at the top of the code which you can leave there or move to your custom stylesheet, it’s up to you.
Please give this a try.

Best regards,
Mike

Hi,
This will occur if the image is larger than 1500×630 with the crop function, if your image is smaller you will need to resize before uploading.

Best regards,
Mike

Hi,
Glad we were able to 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 try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

#top #header_meta .social_bookmarks,
#top #header_meta .phone-info.with_nav{
	margin-top: 4px;
}

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

Best regards,
Mike

Hi,
Did BigCommerce ever reply to you about a function? Our theme checks for WooCommerce with if( function_exists( 'WC' ) ) as many themes do, and this seems to be were the conflict is.
I will also ask the rest of the team for ideas.

Best regards,
Mike

Hi,
Glad to hear this helped, please use css to add extra space below the button, perhaps like this:

#shopknop {
    margin-bottom: 20px;
}

as for the filtering plugin options and the pagination I’m not sure how this is being communicated to the next page, there are no classes, endpoints, or strings being saved in the page when an option is selected or unselected, from page 2 clearing the filter doesn’t reset the pagination.

Best regards,
Mike

Hey Kate,
Thank you for your patience, I see that you are using Enfold v4.7.5, but I can’t see if you are using the old Envato API or the new Envato Token, please see our documentation about the Envato personal token and check.
Another option would be to go to your Theme Forest account and download the current version and manually update. Please do not try to overwrite the theme files, you must delete the old theme files first, otherwise old files may remain and cause errors.

Best regards,
Mike