Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1396183

    Hi I am working on a home page and I need to set a Fullscreen slider with one single picture. Over that I want to show a graphic image (I have it in png and svg), over which a special header appears. Both these elements have been placed using the position absolute and adjusting top/right values.

    However when I load the page in front-end I can see the graphic image and text appearing for a millisecond. Then they disappear and appear again when I start scrolling the page. I checked if there was some further advanced rule applied to the elements but there not. How can I keep them visible since the beginning of the loading page?

    Here’s my debug code

    [av_fullscreen size='2048x2048' control_layout='av-control-default' slider_navigation='av-navigate-arrows av-navigate-dots' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' image_attachment='' animation='slide_up' transition_speed='' autoplay='false' interval='5' conditional_play='' img_scrset='' lazy_loading='disabled' id='' custom_class='home-open-img' template_class='' av_uid='av-ldk05icf' sc_version='1.0']
    [av_fullscreen_slide slide_type='image' id='116' position='center center' video='https://' mobile_image='' fallback_link='https://' title='' video_cover='' caption_pos='caption_right' custom_title_size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-uv4f' sc_version='1.0' video_autoplay='' video_controls='' video_mute='' video_loop='' overlay_enable=''][/av_fullscreen_slide]
    [/av_fullscreen]
    
    [av_image src='http://localhost:8888/rialto1082.com/wp-content/uploads/2023/01/bridge-graphic.png' attachment='97' attachment_size='full' copyright='' caption='' image_size='no scaling' styling='' box_shadow='none' box_shadow_width='10' box_shadow_color='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='none' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='none' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='none' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='none' av-mini-parallax_parallax_speed='' hover='' blur_image='' grayscale_image='' fade_image='' appearance='' css_position='' css_position_location=',-50%,150%,' css_position_z_index='10' av-desktop-css_position='absolute' av-desktop-css_position_location=',-50%,260%,' av-desktop-css_position_z_index='10' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,260%,' av-medium-css_position_z_index='10' av-small-css_position='absolute' av-small-css_position_location=',-30%,260%,' av-small-css_position_z_index='10' av-mini-css_position='absolute' av-mini-css_position_location=',-30%,260%,' av-mini-css_position_z_index='10' transform_perspective='' transform_rotation=',,,' transform_scale='1.5,1.5,1.5' transform_skew=',' transform_translate=',,' av-desktop-transform_perspective='' av-desktop-transform_rotation=',,,' av-desktop-transform_scale=',,' av-desktop-transform_skew=',' av-desktop-transform_translate=',,' av-medium-transform_perspective='' av-medium-transform_rotation=',,,' av-medium-transform_scale=',,' av-medium-transform_skew=',' av-medium-transform_translate=',,' av-small-transform_perspective='' av-small-transform_rotation=',,,' av-small-transform_scale=',,' av-small-transform_skew=',' av-small-transform_translate=',,' av-mini-transform_perspective='' av-mini-transform_rotation=',,,' av-mini-transform_scale=',,' av-mini-transform_skew=',' av-mini-transform_translate=',,' mask_overlay='' mask_overlay_shape='blob' mask_overlay_size='contain' mask_overlay_scale='100%' mask_overlay_position='center center' mask_overlay_repeat='no-repeat' mask_overlay_rotate='' mask_overlay_rad_shape='circle' mask_overlay_rad_position='center center' mask_overlay_opacity1='0' mask_overlay_opacity2='1' mask_overlay_opacity3='' link='' target='' title_attr='graphic-motif' alt_attr='graphic motif' img_scrset='' lazy_loading='disabled' av-desktop-hide='aviaTBav-desktop-hide' av-medium-hide='aviaTBav-medium-hide' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-ldk1oq0a' sc_version='1.0' admin_preview_bg=''][/av_image]
    
    [av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' radius_sync='true' min_col_height='' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' css_position='' css_position_location=',-30%,150%,' css_position_z_index='' av-desktop-css_position='absolute' av-desktop-css_position_location=',-40%,320%,' av-desktop-css_position_z_index='15' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,320%,' av-medium-css_position_z_index='15' av-small-css_position='absolute' av-small-css_position_location=',-30%,320%,' av-small-css_position_z_index='15' av-mini-css_position='absolute' av-mini-css_position_location=',-20%,320%,' av-mini-css_position_z_index='15' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' av_uid='av-12txf' sc_version='1.0']
    [av_heading heading='Rialto 1082<br/>Venice Bed & Breakfast' tag='h1' style='blockquote modern-quote modern-centered' subheading_active='subheading_below' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='26' subheading_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='16' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-ldk1eds5' sc_version='1.0' admin_preview_bg=''][/av_heading]
    [/av_one_full]
    #1396311

    Hey Elena,

    Thank you for the inquiry.

    Where can we check the issue? Please provide the site URL so that we can see the slider transition.

    Best regards,
    Ismael

    #1396351

    Hey Ismael, it is on a local machine because I am starting to develop it. However I reproduced the page on a site that I just published, so you can have a look. I post it on the private link

    • This reply was modified 1 year, 9 months ago by elenapoliti.
    #1396549

    Hi Ismael, by the way in the the same website where I created my test page for you, I encounter the same issue when I added to the pages an opening “fullscreen slider” with the column positioned -30% margin top (you can check any page of the website). The column with title and text appears overlapped to the slider only when starting scroll the page.

    That’s kind of weird

    #1396675

    Hi,
    Thank you for your patience, I examined your page carefully and tried everything I could think of and was not able to see a cause or a solution.
    Can you disable all of the plugins on the test site to remove that possibility, and then reply back, perhaps Ismael will see something I missed after the weekend.
    Thank you for your patience.

    Best regards,
    Mike

    #1396974

    No Mike it’s not a matter of plugins, as the same things is happening on my local computer on a developing website, which has no plugin at all yet.
    I wonder if, with the latest upgrades of Enfold and the introduction of position and z-index for most elements may cause a different behaviour.

    I found a hack, which is to put the elements in a section with z-index 10. However I would prefer to have single elements, instead of a section, overlapping the full screen slider. Otherwise I guess I should deal with LayerSlider or Slider Revolution (which I hoped not to use)

    If Ismael may jump in the conversation, it would be great

    #1397564

    Hi,
    Thanks for your patience, I asked the rest of the team for any ideas or recent z-index changes as I couldn’t find any in the change log.
    Since I didn’t hear back I took another look at your test page and found that this css seems to correct the issue:

    .avia-fullscreen-slider {
    	z-index: 0;
    }

    Please give this a try.

    Best regards,
    Mike

    #1397997

    ok Mike thanks

    #1398048

    Hi,
    Unless there is anything else we can assist with on this issue, shall we close this then?

    Best regards,
    Mike

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.