Hey GWS,

Thank you for the inquiry.

We are not really sure why the items are not sorting correctly, but we do know that there’s a known quirk with the masonry or isotope script where sorting may fail at times, often due to differences in content or image sizes between items.

Please try this script in the functions.php file and let us know the result:

add_action('wp_footer', function () {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const masonryContainer = document.querySelector('.av-masonry-container');
        if (!masonryContainer) return;

        const masonryItems = Array.from(masonryContainer.querySelectorAll('.av-masonry-entry'));

        const masonryWithDates = masonryItems.map(item => {
            const dateElement = item.querySelector('.av-masonry-date');
            const dateText = dateElement ? dateElement.textContent.trim() : '';
            const parsedDate = new Date(dateText);
            return { element: item, date: parsedDate };
        });

        masonryWithDates.sort((a, b) => b.date - a.date);

        masonryWithDates.forEach(({ element }) => {
            masonryContainer.appendChild(element);
        });
    });
    </script>
    <?php
}, 9999);

Best regards,
Ismael

Hey Maria,

We have added your email to the account in question. Please note that the username cannot be changed. Please try logging in with your email, and the password in private. Note that your support period has expired, so if you want to post new topics then you would need to extend it: https://help.market.envato.com/hc/en-us/articles/207886473-Extending-and-Renewing-Item-Support

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 atx_m,

Thank you for the inquiry.

The TOC widget doesn’t have an active state by default, but you can use this script in the functions.php file to add an active class on click and while scrolling.

add_action('wp_footer', function () {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const tocLinks = document.querySelectorAll('.avia-toc-link');
      const headingSelectors = document.querySelector('.avia-toc-container').dataset.level.split(',');
      const headings = Array.from(document.querySelectorAll(headingSelectors.join(',')));

      tocLinks.forEach(link => {
        link.addEventListener('click', function () {
          tocLinks.forEach(l => l.classList.remove('active'));
          this.classList.add('active');
        });
      });

      function onScroll() {
        let scrollPosition = window.scrollY + 100;
        let currentId = null;

        for (let i = headings.length - 1; i >= 0; i--) {
          const heading = headings[i];
          if (heading.offsetTop <= scrollPosition) {
            currentId = heading.id;
            break;
          }
        }

        if (currentId) {
          tocLinks.forEach(link => {
            link.classList.toggle('active', link.getAttribute('href') === #${currentId});
          });
        }
      }

      window.addEventListener('scroll', onScroll);
      onScroll();
    });
    </script>
    <?php
}, 9999);

You can then include this css to adjust the color of the active TOC links:

.avia-toc-link.active {
  color: #fe9000;
  font-weight: bold;
}

To change the heading tags, edit the widget and look for the “Select headlines to include” option.

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

We added this code to the Quick CSS field to make sure the font of the submenu links remain regular on smaller screens. Unfortunately, there is no a dedicated option for this, so a custom css modification was necessary.

#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul > li > ul.sub-menu  li a {
    font-weight: normal;
}

Best regards,
Ismael

Hey atx_m,
For the page that you linked to try this css:

#top.single-post .big-preview {
	display: none;
}

Then clear your browser cache and check.

Best regards,
Mike

Hey classywebsites,
To add a bold font weight to the mobile menu you need to choose the Menu Links in overlay/slide out option in the Advanced Styling, I did this for you and it now works.
As for the mobile menu, please note that your desktop menu has too many items to show in a single line and not be under your logo until 1215px, so I recommend adding this css:

@media only screen and (min-width: 768px) and (max-width: 1215px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
        display: block;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
        display: none;
    }
}

I added it for you in your WordPress > Customize > Additional CSS and tested desktop, tablet and mobile, please clear your browser cache and check.

Best regards,
Mike

Hi,

Thank you for the update.

This is what happens when we toggle the css rule — you’ll notice how the document moves when we turn it on and off. The issue is definitely caused by the css rule. Please check this short video:

Best regards,
Ismael

Hi,

Thank you for the update.

You can add this css code to adjust the width of the featured images in mobile view, make sure they don’t overflow outside the screen.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  #top.single-post .fullsize .template-blog .big-preview img {
    width: 100%;
    min-height: auto;
    object-fit: contain;
  }
}

Result:

Best regards,
Ismael

Hi,
When I check your test page the “opening frame” is relly the background image so use this css to hide:

#top.page-id-11644 #av_section_1 {
        background-image: none;
}

note the page ID in the css, remove or adjust for your working page.
Then leave Ismael’s script to stop the loop and add this script to end on the last frame/second, your video is 29s so the script ends on 28s. Adjust for future videos and adjust the page ID.
Add this to your child theme functions.php:

function pause_video_on_last_sec() { ?>
  <script>
if (document.body.classList.contains('page-id-11644')) {
    var x = document.getElementsByClassName("avia_video");
    var i;
    for (i = 0; i < x.length; i++) {
        x[i].addEventListener("timeupdate", function(){
            if(this.currentTime >= 28) {
                this.pause();
            }
        });
    }
}
</script>
  <?php
}
add_action( 'wp_footer', 'pause_video_on_last_sec', 99 );

Best regards,
Mike

Hi,
Try looking in your child theme functions.php file, I believe that you are using this custom script to add it.

Best regards,
Mike

Hey Paloma,

Your theme settings should stay the same, but you should export and save them locally from Enfold->Import/Export in case you should need them at some point.

The update to 7.1.2 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the theme as if it was new under Appearance->Themes->Add New Theme.
If that doesn’t work then please try to delete the whole theme folder, then replace it with the new version. Make sure that you have backups of the site before starting updating.
Also please read this after you have updated: https://kriesi.at/documentation/enfold/

Best regards,
Rikard