Slider and header: slider overlay the header

  • Resolved fmortara

    (@fmortara)


    1 year, 9 months ago

    Hi, I have set a slider revolution header using the additional plugin and everything works well. I have noticed that the slider is overlaid over the sticky navigation menu items. See image –?https://snipboard.io/R1IFc4.jpg

    Due to the slider background image, it is hard to see the nav menu, however once I scroll down a tiny bit, the sticky menu background colour is displayed.
    See image – https://snipboard.io/va4dRO.jpg

    Any way to have the slider not overlay on the sticky nav? or display below the sticky menu?

    I’ve tried to set the slider with shortcode or block, but this workaround not work if there is a sidebar in the page, because the slider overlay the sidebar content.
    See image – https://snipboard.io/kVlGn9.jpg

    There are three slider in demo data. Two of this have the correct top-margin as the height of my header. I think set by some js. How can I set the margin? Why the margin is not displayed in all of slider?

Viewing 1 replies (of 1 total)
  • Thread Starter fmortara

    (@fmortara)

    Here’s the solution: you just need to remove the absolute position from the header .site-header:not(.sticky).with-header-slider.

    from:

    .site-header:not(.sticky).with-header-slider {
    position: absolute;
}

    to

    .site-header:not(.sticky).with-header-slider {
    position: relative;
}

    Or just add the rule to the custom CSS in personalization area.

    • This reply was modified 1 year, 9 months ago by fmortara.
Viewing 1 replies (of 1 total)
  • The topic ‘Slider and header: slider overlay the header’ is closed to new replies.