Docs

[aslanj]

Hi there!

I was wondering if it’s possible to have a fixed header image at the top, with the menu right below it, and when scrolled, the menu slides over the header image and sticks at the top (fixed)?

Right now, I have a static header image / logo, full width, and a menu bar right below it. No customizations in either of these. When scrolled, the whole page moves up and the menu gets fixed (sticky) at the top throughout the rest of the page. I’d like to try and hold the image in fixed position at the top and have the menu slide over it when scrolled down. I don’t want to use a slider plugin for this. I hope this makes sense.

I’m adding the link to the site below.

Thanks in advance!

[aslanj]

My mistake. Cannot share the site link with you as it’s a development site on a closed environment; would require VPN to even view it. It’s hosted by our institution’s IT. Sorry.

I hope what I explained above makes sense. Nothing too complicated. Header image (fullwidth using CSS; I was wrong to say no customization above) stays at the top, menu scrolls over it when page is scrolled down. Menu sticks at the top throughout the rest of the page (fixed at the top.) Currently, the image moves up along with the menu and menu stays at the top (so, fixed menu works.)

Thanks!

[aslanj]

I found the example I was looking for:
https://avada.theme-fusion.com/header-below-slider/

Menu (and the rest of the page) just slides over the video when scrolled down. Instead of a video, it would be a static image with 100% width. Hope this makes sense.

[Rupok]

Hi there,

Thanks for writing in! Let’s create a slider with Revolution Slider and assign to “Above Masthead”.

Cheers!

[aslanj]

Thanks for responding. Like I mentioned in my first comment, I’m hoping to accomplish this via CSS and/or JS, and not by using a slider. Is this possible? In other words, is it possible to add CSS to tell the header image to stay at the top without moving and let the rest of the page (including the menu) slide up over the header image? Maybe by using CSS to change position and z properties of the header image? I tried a few lines of CSS, but all I could do was fix the header image / logo at the top of the page, permanently.

I know this can be done using a slider plugin and assigning a static image to a single slide, but in my experience, sliders can load a tiny bit delayed compared to the menu and the rest of the page, which causes a jump-down once the slider loads. Sliders can also cause issues on mobile. That’s why I’d prefer a static image, like a logo.

Currently, I’m using the Integrity stack with a fixed and stacked header. I’ve uploaded a wide image, added CSS to make it fullwidth, and the menu is sitting right below it. All I’d like to do is to have the image stay put and let the rest of the page move up over it when scrolled down, just like in the example at the link I shared above.

[Rad]

Hi there,

It’s only possible with custom development, even if you do it in RevSlider, it will still stay fixed on its position. The scroll and fixed positioning is only applicable for navigation, other relative elements aren’t part of it. Still possible but would be complex. You may wish to consult it to a developer, you’ll have to recreate the header structure for this implementation.

Thanks!

[aslanj]

Thanks for the explanation!

Would it be possible with the Rev Slider assigned to abive masthead, as suggested in the first reply? If yes, could this be accomplished by simple CSS or will I also need to include some JS?

Thanks!

[aslanj]

Wait, so, we can’t do what they have in the example below with Theme X, even with a slider? Slider or image stays at the top and page moves over it (instead of the slider or image moving up, too.)

Example: https://avada.theme-fusion.com/header-below-slider/

[Rad]

Hi there,

If it’s just placing the slider in fixed position like from your provided sample, then yes possible. Your sample uses a slider too, as per your requirement you wish to implement it by just CSS and Javascript which is only possible with custom development. Go ahead and create a slider and I’ll provide the CSS that will put it in fixed position. But again, if you plan to make that effect purely in CSS/Javascript then you’ll need a developer for customization.

Thanks!

[Author]

Posts