Fixed Header-Slider?

  • Resolved permaea

    (@permaea)


    7 years, 7 months ago

    Hi,

    Would anyone know how the slider can be fixed like a normal header-image or background image (and its overlayed text just scoll up normally [as it currently does perfectly fine on other non-slider header images on other pages] and not be parallaxed) so that scrolling doesn’t affect its placement, and if so, how would this be done? (For now, the test slider [with two slides; the second one, being a video] is only being used on the front page.)

    Site:
    https://permaea.altervista.org

    Incidentally, if to no avail, I tried these CSS’…

    .terra-themes-header-slider.owl-carousel .owl-item {
    cursor: default;
    position: fixed;
    }

    …and…

    .header-slider-item .parallax-header .header-image {
    position:fixed;
    }

    I tried something else earlier as well, and while it worked for the header-slider in fixing it, it broke the flow of the rest of the elements on the page so that they flowed over the fixed header-slider image.

    Also, as more of an aside, the lower-right pause button of the video of the second header-slide on the front page looks nice (as does the test video) and is nicely placed and obvious to the user, but selecting it has no effect, (although selecting practically anywhere else on the video does work in this regard).

    Lastly and again, more as an aside, H1 and other type-sizes chosen in the Customizer don’t seem to directly control the sliders’ (or headers’) overlayed text– at least beyond a certain size. A larger size for the overlayed header-/slider-text would be nice. Also, if H1 is selected, and increased in size in the Customizer, the H1 will increase elsewhere, except at the header-/slider-text overlay.

    Thanks!

    ~ Caelan

Viewing 4 replies - 1 through 4 (of 4 total)
  • Theme Author terrathemes

    (@terrathemes)

    Hi @permaea,

    I found that there is an issue between owl carousel which is used for the slider and the fixed background. Currently I can’t find a solution for this.
    The issue you described happens because the fixed slider isn’t in the document flow anymore and therefore the content would need a padding-top with the same height as the sliders height. This would need some basic jQuery, but I can’t guarantee that it will work.

    The pause button is just an icon indicating that the slider has stopped if you have got autoplay and ‘stop on hover’ set to on. I think I will remove this since it might be more confusing.
    Stopping the video with a click is only availiable with the overlay disabled. Maybe I find a solution for this.

    The header/slider text is styled with these CSS rules:

    .parallax-text .header-image-heading {
  font-size: 45px;
}
.parallax-text .header-image-text {
  font-size: 20px;
}

    They are styled independent from the H-tag, it’s more like a feature for search engine optimization.

    Regards,
    Terra Themes

    Thread Starter permaea

    (@permaea)

    Hi @terrathemes,

    Thanks for the help and insight.
    I will implement your header font sizing code in the mean time and, time permitting, look into another slider, since, if understood correctly, Meteorite theme allows for that.
    If it works, I will re-enter this thread, mention it and maybe with some additional info and, if you think it makes sense, mark the issue as resolved.

    ~ Caelan

    Theme Author terrathemes

    (@terrathemes)

    Hello @permaea,

    you’re welcome.
    Crelly Slider and Meta Slider are worth a try. I don’t know whether the fixed background works with them, but maybe it will. The slider shortcode should work well in the header shortcode area.

    Regards,
    Terra Themes

    Thread Starter permaea

    (@permaea)

    Thanks, @terrathemes, I’ll look into them.

    ~ Caelan

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Fixed Header-Slider?’ is closed to new replies.