Ah ha! I was using the “tab section”element not the “tabs” element!
thank you!

Yes I did that – and tested in Chrome Dev tools as well.

@ismael – thanks again –
how would I do the opposite approach – and float the nav to the right instead of left?
I tried using justify-content end – but that did not work.
thanks!

• This reply was modified 3 years, 4 months ago by jomo5280.

• This reply was modified 3 years, 5 months ago by jomo5280.

currently site is on a staging server which only I can view, and this is the code I am using:
(I just need .main_menu to float left next to logo, as oppose to being centered in the header (not using justify-content: space-between;)

/*--------------------------------

» Header

--------------------------------*/

/* Height */

#top #header #header_main .container.av-logo-container {
    height: inherit;   /* Auto height: Header takes the height of the contents */
}

/* Header inner container */

#top #header #header_main .container.av-logo-container .inner-container {
  height: inherit; 
  position: relative !important;
  flex-wrap: nowrap;
  justify-content: space-between;
}
/* Wrappers 
--------------------------------*/

/* Header content and Topbar */

.responsive #top #header {
    flex-wrap: wrap;
}

/* Header contents: Logo, Menu, Social Icons and Widgets. */

.responsive #top #header #header_main {
    flex-basis: 100%;    
}

/*--------------------------------

» Menu

--------------------------------*/

/* Menu outer container: Menu with siblings cart and social icons */

.responsive #top #header #header_main .inner-container .main_menu {
    order: 0;
    flex-basis: auto;   /* Use calc to minus the width of the logo */
    align-items: center;
    align-self: center;
}

/* Navigation */

#header .av-main-nav {
    display: flex;
    flex-wrap: nowrap;
}

• This reply was modified 3 years, 5 months ago by jomo5280.

Fixed! I added the following classes to my column elements to force all fade-in columns to animate on page load or tab title click (not waiting to scroll through viewport).

CSS Class:
av-animated-generic fade-in avia_start_animation avia_start_animation_when_active

I think the “avia_start_animation_when_active” class forced it to start animation on page load/tab title click.
This fixed content in my tab-sections that had the fade effect not to get stuck on 0 opacity.

Hope this fix helps others if they have same situation!

• This reply was modified 5 years, 2 months ago by jomo5280.

Applying custom title(s) to .av-current-sort-title and not effect the titles of the sort_by_cat items?
Anybody have any idea(s) to see if this is possible with an add_filter snippet as mentioned above?
I need a custom title to appear when users filter each category (replacing the default title pulled from sort_by_cat) – and ideally control via add-filter – but open to suggestions!
thank you!

• This reply was modified 5 years, 2 months ago by jomo5280.

Resolved!
I needed a different type of toggle with arrow up/down and be at the bottom of the content when opened. (and not mess with core Enfold toggle.php files)
I got this jfiddle to work by adding it via snippets plugin:

add_action( 'wp_head', function () { ?>
<script>
jQuery(document).ready(function($) {
 $('#open-close-toggle').on("click", function(){
   var $arrows = $(this).find("img");
   $('#toggle-section').slideToggle(function(){
       $arrows.toggle();
   });
});
	});
  </script>
<?php } );

Here is the URL to the Jfiddle Toggle in case it helps anybody in the future: https://jsfiddle.net/hibbard_eu/kBJKb/

Ok, i have resolved this issue as well – had to edit image.php to get the caption out of the parent Div.

//$overlay = "<div class='av-image-caption-overlay'>{$overlay_bg}<div class='av-image-caption-overlay-position'><div class='av-image-caption-overlay-center' {$style}>{$content}</div></div></div>";
							$overlay = "<div class='av-image-caption-overlay-center' {$style}>{$content}</div><div class='av-image-caption-overlay'>{$overlay_bg}<div class='av-image-caption-overlay-position'></div></div>";

and add this to custom.css:

.av-overlay-on-hover .av-image-caption-overlay-center{opacity: 0; filter:alpha(opacity=00); }
.av-overlay-on-hover .avia-image-container-inner:hover .av-image-caption-overlay-center{opacity: 1; filter:alpha(opacity=100);}

• This reply was modified 5 years, 5 months ago by jomo5280.

Thanks Victoria – I figured out the issue. I had a background class that was set to “cover” – i just reset to initial for mobile viewport and now is working nicely!

I was able to figure out a solution using Codeblocks and css3 transitions.
Here is a link to the css transitions that worked for me: Smooth Text Overlays with CSS

You can close this.
thanks!

thank you – It finally worked when I resized “entry_with_sidebar size” – which seemed to work for my Featured Images in the Blog Posts.