This is the code in the functions.php which I am referring to:

// Verwijder lege masonry items (zonder afbeelding) en herbereken de layout
function regenboog_fix_empty_masonry_items() {
    ?>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        var $container = $('.av-masonry');

        if ($container.length) {
            // Loop door alle masonry entries
            $container.find('.av-masonry-entry').each(function() {
                // Als er geen afbeelding in de entry staat, verwijderen
                if ($(this).find('img').length === 0) {
                    $(this).remove();
                }
            });

            // Na een kleine vertraging Masonry opnieuw laten rekenen 
//             setTimeout(function() { 
//                 $container.isotope('layout');
//             }, 300);
        }
    });
    </script>
    <?php
}
add_action('wp_footer', 'regenboog_fix_empty_masonry_items', 100);

When I remove this piece of code, the masonry grid looks like the screenshot in the Dropbox (link in Private Content)

In order to get to the code, I turned on block editing for code and found code below. It did put the button in a widget, but the font is supposed to be white on the button even on hover. The button background colors are right, the link work, but the font isn’t white. Any ideas?

[av_button label='Book A Discovery Call' icon_select='yes-right-icon' icon='forward' font='svg_entypo-fontello' title_attr='' button_type='' link='manually,https: (Email address hidden if logged out) /meetingtype/SVRwCe7HMUGxuT6WGxi68g2?bookingcode=be576115-ff4a-4f42-bc3c-696a8c305e44&anonymous&ep=mlink' link_dynamic='' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' size-text='22' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='15' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='color_options_advanced' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color-highlight' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' element_template='4431' one_element_template='' av_uid='av-2g3zwf' sc_version='1.0' admin_preview_bg='']

Thank you. However, if you look at the middle image, three options example look what it does to the image.

These are the settings I’m using for the color section example.
color section settings

The third image is the full width slider, which operates as I would expect, but I can’t us that. I need the color section background to work as advertised.

I have no content going on top of this element. I’m just trying get an image to display full width.

Sorry to do this but, I can’t start new topics despite having a current license?

I added this code now:

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);

but a can’t see any change in the behaviour.

Hi Mike,

Thank you for working on this and changing the font weight to bold in Menu Links in overlay/slide out option in the Advanced Styling.
I am trying to have the Menu Links in overlay/slide in bold, but the sublevel Links not in bold. This seems to already work on the Desktop.

I removed your code from WordPress >Customize>Additional CSS for now.
To avoid long menu issues on small screens, I simply set the burger menu for small screens:
I set Menu Items for Mobile to Activate for Smartphones and Tablets (browser width below 990px) in Main Menu settings Is that correct and avoid the need for your code?

Can you please fix this using Enfold Style settings to avoid more code?
Can you please test your solution on desktop, tablet and mobile?
Thank you

any ideas to clear cache? I tried plugins. looks good on desktop but not right on mobile view

This cache thing is killing me. I can’t figure out why desktop looks different than mobile view. Especially the logo and burger icon. The logo is supposed to have white wording and then blue. I have it setup correctly in the theme editor Transparency Options. Let me know if you can help please. I probably need the CSS cleaned up because I exported from another project. I just don’t know the code and what is needed.

Thanks again for all your help.

I might just go with the curly section divider to make this easier. Question though, why would my logo not update on mobile view, when it is correct on desktop view. This top logo has white wording when open, then switches to blue, when scrolled. But on mobile, they are both blue. Any ideas? I did all the cache already and nothing.

Thanks!

Thank you for your help. We found a solution. You can close the topic.
Best regards Barbara