Can Sider theme header be made to scroll depending on screen height?

Hi Daniel,

If there's more content in the menu on the example site you linked, there won't be a scroll bar, but the overflow content will be hidden.
https://www.screencast.com/t/n18Pybdd
Is this what you are trying to achieve?

Is it possible to have the side header fixed when the browser height is larger than the content area, but scroll when the browser is smaller?

Not sure I fully understand your question, it sounds like the Sider template behaves by default...

Maybe explain some more?

Hi Ying,

Sorry for the confusion. The feature is simple in concept, but hard to portray in words. I've included links in to a couple screen captured videos. One shows what is happening on my GeneratePress site, and the other shows how it works on the example site. Hopefully it will make more sense visually.

Thanks.

Hi Daniel,

Can you try adding this CSS?

header#masthead {
    overflow: visible;
}

Hi Elvin,

That CSS does remove the vertical scrollbar, but the side header still stays fixed no matter the height of the browser. So anything below the window is not visible, nor accessible.

- Daniel

Hi there,

the example site changes the masthead from fixed position to absolute when the content overflows the viewport. And then resizes the masthead to fill the height of the content... which it uses jQuery for... not something i have a solution for.

But .. an alternative method with some CSS:

1. Set your Body Background Color to Match your Header Color.
This is required, as the below CSS will absolutely position the masthead which will auto size to its own content. So you'll see the body background behind it.

2. Add this CSS:

@media (min-width: 940px) and (max-height: 800px) {
    #masthead {
        position: absolute;
        bottom: 0;
        height: auto;
    }
}

Adjust the max-height to suit your site.

Hi David,

Totally understand the limitations. I'm not total newb, but I'm not familiar with jQuery stuff. I was hoping this was something CSS could accomodate.

Your CSS solution does work wonderfully to achieve the function I was looking for. However, I'm not sure if I can use the same color background on both the header and body. I'm wondering if I could 'trick' it into the appearance I want by creating an image to use for the background that has a color block to match the size and color of the header.

Let me mess around with some options today and see if I can get it to work. I appreciate everyone's attempts to get this theme to bend to my will, haha.

Another, somewhat related, question. Is there a way to format the alignment of the Navigation Menu text in a similar way to that other site as well? As in, Menu items aligned to the left, drop down carrots to the right, Submenu items aligned left but indented?

Thanks again.

Unless there are some pages that use different colors i don't see a problem changing the Customizer > Colors > Body > Background, as you currently have a background color for your Colors > Content.

If you can raise a new topic for the other requirements we can take a look at that too.

Hi David,

You're right, changing the background color does work, but only as long as the browser window doesn't go wider than the set Container Width (currently 1200px on my site). I'm sure there's some kind of CSS that could set the content width to 100% to fix that problem, but I do want my content to have a max width. Thoughts?

I'll start a new thread for the menu text alignment once I get this figured out. Thank you.

Hi David,

UPDATE: My hypothetical 'trick' worked like a charm! I used Photoshop to create a 4000x4000 background image with the same color as the Body/Content (1e1e1e), then placed a 250x4000 rectangle on the left side, the same color as my header (2d2d2d). I then used this image under Customizing>Background Images>Body, set to No Repeat, Size(Auto), Fixed, left top. Looks flawless! (linked in Private)

Thank you for your CSS wizardry in this. I'll now create a new ticket for the Menu Text alignment.

Nice :) Glad to hear thats working for you!