Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Nikko could help you out. 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 northorie,

Thank you for the inquiry.

1.) You can add this css code to adjust the height or size of the image containers inside the cells.

.responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner {
    height: 100%;
}

.responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner .avia-image-container {
    height: 33%;
}

.responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner .avia-image-container .avia-image-container-inner, .responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner .avia-image-container .avia-image-container-inner .avia-image-overlay-wrap, .responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner .avia-image-container .avia-image-container-inner, .responsive #top #wrap_all .flex_cell.av-bpxls4-4533b655858484ed8d63e280429e26ae .flex_cell_inner .avia-image-container .avia-image-container-inner .avia-image-overlay-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

2.) You can edit the Grid Row element and set the Advanced > Responsive > Fullwidth Break Point settings to the section option. For the columns, you can edit the first column in the row, then adjust the Fullwidth Break Point settings in the Row Settings > Row Screen Options toggle.

Best regards,
Ismael

Hey northorie,

Thank you for the inquiry.

The advanced styling of the h2 element overrides the custom style of the timeline date. You may need to adjust the advanced styling of the element or you can add this css code to adjust the color of the date.

#top #wrap_all .all_colors h2.av-milestone-date {
    color: #000000;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings to ensure that the changes take effect.

Best regards,
Ismael

Hey Oriano,

Thank you for the inquiry.

Please remove the previous modification, then use the following css code instead.

@media only screen and (max-width: 989px) {
  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #header #header_meta .social_bookmarks {
    display: block;
  }
}

Best regards,
Ismael

Hi,

Thank you for the info.

You can add the top css property to the previous css code to adjust the vertical position of the icon.

#menu-item-39 span.avia-menu-text:before {
    content: url(https://img.icons8.com/color/17/wordpress.png);
    display: inline;
    padding-right: 10px;
    vertical-align: sub;
    top: 1px;
    position: relative;
}

We tried to apply this modification to the site but the account above is not an admin.

Best regards,
Ismael

Hi,

@Guenni007: Yes, the script should work regardless of the burger menu settings. You may need to add a few more conditions if you need to prevent the submenu from sticking when the burger menu overlay is active.

function ava_custom_sticky_sub_menu()
{ ?>
    <script>
  (function($){
    var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 767) {
        $stickyTop.waypoint(function(direction) {
            if (direction === 'down') {
                $stickyTop.addClass('sticky-top');
            }
            if (direction === 'up' || $('.av-burger-overlay').is(':visible')) {
                $stickyTop.removeClass('sticky-top');
            }
        }, {
            offset: '0%'
        });
    }
    })(jQuery);
  </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_sticky_sub_menu', 99 );

Best regards,
Ismael

Hey xfacta,

Thank you for the inquiry.

If you want to fully display the image on mobile view, you can set the Styling > Background Image > Background Repeat to Scale to fit. This will contain the image and make it fully visible inside the color section container. Another option is to add another Color Section and upload a different background image appropriate for the mobile size. Then, toggle the Advanced > Responsive > Element Visibility settings to control the visibility of the new section and the other Color Section. Essentially, you’ll have two versions of the same Color Section, one for desktop and another for mobile view.

Best regards,
Ismael