▼
Streaming live at 10am (PST)

Slide Element height

Design help General
#1

Hi,
Using the “Slide” element is there a way to have the slide container scroll vertically? I have 2 containing div’s inside of the slide element. Div “Overview” is set to 100% height and has a background image. Div “Features” height is set to auto, and display is set to “none” it display’s when the “learn more” button is clicked from the “Overview” Div. The problem I am having is, when the button is clicked, I can’t scroll down to see it. Here is the link:

https://preview.webflow.com/preview/blhome2?preview=8d11a2bf121ab2e8ac93cff15ba75722

#2

Hi @abdul, thanks for the good question. The slider does not resize vertically, but you can add a div as the first element in the slider and give it a new class name, and give it position relative, with overflow set to auto or scroll.

Place everything else in that new div. could you try that and see if it works for you?

I hope this helps, cheers, Dave :slight_smile:

#3

Thanks for your reply. I have tried what you suggested. It doesn’t solve the issue. Also there is a “mask” element, you suggested I put the everything inside of the new div in the first element of the slider, but with that results with the mask and slides outside of that element. You can see the results to your suggestion below. Not sure what else to try. https://preview.webflow.com/preview/blhome2?preview=8d11a2bf121ab2e8ac93cff15ba75722

#4

I did notice that if I set “mask” to scroll, I am able to scroll but the overflow of the mask is no longer hidden resulting to bad formatting.

#5

Hi @abdul, please see this test site:

http://test-layouts.webflow.com/

Notice how the slider content in the first slide scrolls. Is that what you are trying to accomplish, that when there is too much content to fit the slide, that the scroll appears?

#6

Yea, that is the idea. But the image in the slider should be 100%. It shouldn’t be a background image, because when you scroll down, it should not show.

Here is a good example:

Notice when the page first loads, the “masthead/header” div is 100% in height in the slider, then when you click the “arrow” it reveals the rest of the page and you can scroll. Is this possible in webflow? I just about have it done, it’s just the height of the slide element, when at 100%, it’s not scrolling the elements inside of it.

#7

Thank you for your example. I was able to get it to scroll. The only thing that is missing making the “learn more” button, to link and jump to the “features” section. I have in page linking set up, it just doesn’t jump to the link when clicked.

https://preview.webflow.com/preview/blhome2?preview=8d11a2bf121ab2e8ac93cff15ba75722

#8

Hi @abdul, thanks for your update. On the Learn More button, if you are wanting to smooth scroll from the learn more button to the features, then you would have to put the sections just under the body, the section linking does not work if the section is within a slider element (currently).

This this probably will affect the design, as I can see from your latest example, how you have the site setup with the slider covering the whole viewport.

The structure for smooth scrolling using section links, should be something like this:

Body
  Nav Section
    Navbar
  Section A
    Slider
  Section B
    Div
  Section C
    Google map
  Footer Section
    Footer Divs

I hope this helps. From within the slider element, you cannot link to individual slides, but you might check and use the Tabs component, it might also be useful in your design.

#9