Hi,
For that page try this css:

#top.page-id-38 .flex_column.avia-builder-el-2 {
	 overflow: auto;
}

but on that page the color section that the table is in is hidden on mobile.
If you have multiple tables on multiple pages then I recommend add a custom class to the column that the table is in, if you use the custom class “scroll-table” then you could use this css instead:

#top .scroll-table {
	 overflow: auto;
}

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

Best regards,
Mike

Hi,

Thank you for your patience.

On Firefox, the scroll position is correct on initial load and when you do a hard refresh, which means that the script only fires correctly when you actually refresh the page. Firefox doesn’t seem to automatically refresh the page when you try to access it again by pressing the ENTER or RETURN key in the URL field. You have to do a hard refresh manually. On Chrome, this always works because the browser always refreshes the page automatically when you try to access the page again using the browser URL field. Scrolling also works correctly when you try to access the section using the anchor links at the very bottom of the page.

We modified the filter in the functions.php file a bit to adjust the offset on firefox browser but again this will only work on Firefox if the page is actually refreshed.

function avf_header_setting_filter_mod($header) {
	$offset = strpos($_SERVER['HTTP_USER_AGENT'], "Firefox") === false ? 50 : 75;

	if( ! wp_is_mobile() ) {
		$header['header_scroll_offset'] = $header['header_scroll_offset'] + $offset;
	}
	return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The page should scroll automatically to the open toggle on load. This is declared in the config-templatebuilder/avia-shortcodes/toggles/toggles.js file > trigger_default_open function around line 160.

window.scrollTo(0, container.offset().top - 70);

It is possible that a plugin is preventing the page from scrolling to the active toggle. Have you tried disabling the plugins temporarily?

You should also update the theme to version 4.9.2.1 as soon as possible.

Best regards,
Ismael

Hi @spooniverse,

Yes, you would need to find following in menu.js file

					if( burger_menu.is(":visible") )
					{
						this.css({top: 'auto', position: 'absolute'}); fixed = false;
						return;
					}

and change it to following in your child theme

if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) ){
	this.css({top: header.Height() , position: 'fixed !important'}); fixed = true;
}

Best regards,
Yigit

Hey Jak73,

Thank you for the inquiry.

To make it a bit simple, the width of the image should be close to that of the standard screen resolutions (1920x1080px, 1600x900px), and should have an aspect ratio of 16:9. The image should also exceed the height of the color section to get that subtle image delay when scrolling the document. But please note that the parallax script in the theme will handle the image resizing automatically based on the size of the color section, so you don’t really have to worry about the exact image size.

You can check the image in the private field to get an idea on how big the image should be in a parallax color section. The image is used in one of the demo with the parallax effect. And in case you didn’t know, you can also use the Layer Slider to create a parallax effect.

Best regards,
Ismael

Hi,

We cannot reproduce the issue on our end. The popup container scrolls down to the very bottom and we are able to access the very last tab or toggler without any issue. We provided a screenshot in the private field.

If you want, we can adjust the height of the popup container to make the privacy tabs more accessible. Please add this code in the Quick CSS field.

.av-inline-modal {
    max-height: 95vh;
    overflow: auto;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

It sounds like the block editor is currently enabled. Have you tried reverting back to the classic editor? Because when the classic editor is active, it is possible to set the Advance Layout Builder to full screen, which will automatically set the elements panel to be fixed or make it stick to the top of the builder while scrolling. Please check the screenshot in the private field.

Thank you for your patience.

Best regards,
Ismael

Hey Kyle,
Thanks for the link to your site but the login didn’t work for me, nonetheless try this function in your functions.php instead:

function popup_inline_with_no_scroll() { ?>
<script>
(function($) {
  $(window).on('load', function(){
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
})(jQuery);
</script>
<?php }
add_action("wp_head", "popup_inline_with_no_scroll");

Then clear your browser cache and any cache plugin, and check.

Best regards,
Mike

Hi,

Thank you for the update.

Try to remove the image from the menu item temporarily, then use this css code to insert an icon font inside the login menu item. The icon font should automatically switch color when the header changes or when scrolling down or up.

#menu-item-8683 a:before {
    font-family: 'entypo-fontello';
    content: "";
    font-size: 26px;
}

#menu-item-8683 .avia-menu-text {
    display: none;
}

Best regards,
Ismael

Hi,
Glad to hear this helped, to prevent the popup scroll try adding this code to the end of your functions.php file in Appearance ▸ Editor:

function prevent_popup_scroll() { ?>
    <script>
(function($) {
  $(window).on('load', function(){
    $('.open-popup-link').addClass('no-scroll');
    $('.open-popup-link').magnificPopup({
      type:'inline',
      midClick: true,
      callbacks: {
        beforeOpen: function () {
          $('body').css("overflow-y", "hidden");
        },
        close: function() {
          $('body').css("overflow-y", "auto");
        },
      },
    });
  });
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'prevent_popup_scroll');

Best regards,
Mike

Hey domchocolate,

Thank you for the inquiry.

We have checked the lightbox on a browser device emulation and it seems to be working correctly. If you need to prevent the document from scrolling and make sure that the container appears at the center of the document, please try to replace the script with the following code.

function av_open_inline_popup(){
?>
<script type="text/javascript">
(function($) {
$(window).on('load', function(){
	$('.open-popup-link').addClass('no-scroll');
	$('.open-popup-link').magnificPopup({
		type:'inline',
		midClick: true,
		callbacks: {
			beforeOpen: function () {
				$('body').css("overflow-y", "hidden");
			},
			close: function() {
				$('body').css("overflow-y", "auto");
			},
		},
	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'av_open_inline_popup');

Thread: https://kriesi.at/support/topic/lightbox-17/

Best regards,
Ismael

Hey WebDevDept,
Thank you for your patience, as I understand your situation you would like to have some 1/2 column background videos with text blocks next to them like in a checkerboard pattern, tested using a grid row element with text on one side and a code block on the other with an html code for a background video.
This is the backend view:

this is the frontend view:

the html is based on this codepen, and if you are using the Avia Layout Builder Debugger you can add my test page to your site to examine with this shortcode:

[av_heading heading='Below a grid row element is used' tag='h3' style='' subheading_active='' show_icon='' icon='ue800' font='entypo-fontello' size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' subheading_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' icon_size='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='' custom_font='' subheading_color='' seperator_color='' icon_color='' margin='' margin_sync='true' padding='10' icon_padding='10' headline_padding='' headline_padding_sync='true' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-kuvig2gc' sc_version='1.0' admin_preview_bg=''][/av_heading]

[av_layout_row border='' min_height_percent='' min_height_pc='25' min_height='0' color='main_color' mobile='av-flex-cells' mobile_breaking='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' id='' custom_class='' template_class='' aria_label='' av_element_hidden_in_editor='0' av_uid='av-5o6ocv' sc_version='1.0']
[av_cell_one_half av_uid='av-4at75r']

[av_textblock size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' color='' id='' custom_class='' template_class='' av_uid='av-kuvihovt' sc_version='1.0' admin_preview_bg='']
This is 1/2 of the grid row, the other half has a background video.
[/av_textblock]

[/av_cell_one_half][av_cell_one_half vertical_align='top' padding='0px' padding_sync='true' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' attachment='' attachment_size='' background_attachment='scroll' background_position='top left' background_repeat='no-repeat' link='' linktarget='' link_hover='' mobile_display='' custom_class='' template_class='' av_uid='av-2ohsgf' sc_version='1.0']

[av_codeblock wrapper_element='' wrapper_element_attributes='' codeblock_type='' alb_description='' id='' custom_class='' template_class='' av_uid='av-kuvijbtf' sc_version='1.0']
<style>
/* video background */
#background-video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: -1;
}

/* page content */
p.text {
  color: #fff;
  font-weight: bold;
  text-align: center;
font-size:2em;
}
span.text {
    top: 30vh;
    position: absolute;
    z-index: 5;
    left: 30%;
    width: 50%;
}

@media (max-width: 750px) {
    #background-video { display: none; }
    body {
      background: url("https://assets.codepen.io/6093409/river.jpg") no-repeat;
      background-size: cover;
    }
}
</style>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
  <source src="https://assets.codepen.io/6093409/river.mp4" type="video/mp4">
</video>
<span class="text">
<p class="text">THIS IS A RIVER.</p>
<p class="text">How majestic.</p>
</span>
[/av_codeblock]

[/av_cell_one_half]
[/av_layout_row]

Hopefully this helps.

Best regards,
Mike

Hi,
Thank you for your patience and for the screencast, to add a menu item hover please try this css:

#sub_menu1 #menu-main-menu a:hover {
    display: inline-block;
    visibility: visible;
    border-bottom: 2px solid #fff;
    background: transparent !important;
    opacity: 1;
    padding-bottom: 6px;
}

I tested the scrolling issue and the jump occurs when the sub-menu position is changed from absolute to fixed, this is part of the script for the sticky sub-menu and this added script doesn’t programmatically affect this, it measures the height and distance of the element. I say “programmatically” but strange things can happen.
Anyways I stared at this for a long time scrolling up & down & reviewing your video, and I believe that this is based on the manual scroll speed. When I test with & without the script (on Chrome & Windows 10) if I scroll slowly the jump is almost not there and is the same with & without the script, but if I test quickly the jump really shows, but it seems to be the same with & without the script. I note that in your video the test without the script was slow, and the test with the script was fast.
So for me it was hard to be consistent manually scrolling, so I tested with this script which waits 2 seconds for the pages to load then scrolls down 1200px over 2 seconds, so it’s slow. I also adjusted the speed to 1 second so it was faster and 5 seconds so it was very slow. I did this with & without the script enabled, and in all cases the behavior was the same.
This was the test script if you would like to try in your your functions.php file:

function scroll_test_script() { ?>
    <script>
(function($) {
	setTimeout(function () {
	  $('html, body').animate({scrollTop: (1200)}, 2000);
}, 2000);
}(jQuery));
</script>
    <?php
}
add_action('wp_footer', 'scroll_test_script');

Please see the videos below.
So I guess I don’t really have a solution for you, but considering that the auto scroll test went so well perhaps there is a script to force a slower mouse wheel scroll, but perhaps that would just frustrate users?

Best regards,
Mike