Big header, scroll down, make header small (Like default size)

Support
1

Hallo hallo!

So I would like to have a header with a bigger size than default (Holding an image) and then reduce it, like the logo, to the default size, when you scroll down. Is that possible?

Thanks!

–Alex

1 Like
2

I would also like to know if this is possible. As you can see from my new installation, I have increased the size of the header, logo etc: http://forum.open-dialogue.net

This is to match the primary domain: http://open-dialogue.net

But I am wondering if there is a way to resize it to the default size when the user scrolls down.

3

There are two settings at
Admin → Settings → Required

logo url
The logo image at the top left of your site, should be a wide rectangle shape. If left blank site title text will be shown.
reset

logo small url
The small logo image at the top left of your site, should be a square shape, seen when scrolling down. If left blank a home glyph will be shown.

I guess you could try using the same image for both, if that’s what you mean by “default size”

Otherwise I think you would be better off using an image app to make a compatible logo.

Using the same logo for “scrolled view” could make things a bit cramped there.

4

You might be able to do something like that by putting the big logo in a custom header (admin>customize>css/html/new). Add a header to the ‘Header’ section of the editor:

<div class="wrap brand-header">
    <a href="<!-- your forum url -->">
        <img class="brand-logo" src="<!-- link to big logo -->">
    </a>
</div>

You could add some css to hide the regular sized forum logo until the custom header has scrolled out of view:

.brand-header .brand-logo {
    /* this moves it down a bit, this could be improved */
    position: relative;
    top: 25px;
    z-index: 1200;
}

/* hides the site logo when the custom header is in view */
.d-header #site-logo {
    display: none;
}

/* displays the site logo now that the custom header has scrolled out of view */
.docked .d-header #site-logo {
    display: inline;
}

This works, but is barely tested. Use at your own risk.

3 Likes
5

Thanks for pointing me in the right direction Simon. I have got this working using your html and the following css (at least in Safari and Firefox it works as intended):

.title .logo-big {
display: none;
}

.brand-header {
margin-bottom:-63px;
}

.brand-header .brand-logo {
z-index:5000;
position: relative;
left:130px;
}

As you can see here: http://forum.open-dialogue.net/t/ta-da/15

1 Like
6

It works as long as there is enough room for everything. At narrower screen sizes the logo is covering the login button. It might be possible to make the logo responsive - give it 100% width inside of a div with a percentage width.

It doesn’t work well on an iPad. It would be great to be able to detect that an iOS device is being used so that the custom header could be disabled for it.

7

Thanks for the info Simon. I don’t have an iPad to hand, but will get hold of one, and will also have a go at making the logo width responsive.

8

It turns out that Discourse adds the class .discourse-touch for touch screens. Adding something like this will give you a fixed header on an iPad:

// force the Discourse header to remain fixed, even with iOS 'elastic scrolling'
.discourse-touch .d-header {
    position: fixed;
}

// hide the custom header on touch screens
.discourse-touch .brand-header {
    display: none;
}

// always display the site logo - without this is will disappear during the iOS elastic scrolling
.discourse-touch .d-header #site-logo {
    display: inline;
}

You could also try resize or reposition it based on media queries:

@media (max-width: 700px) {
  .brand-header .brand-logo {
    left: 0;
  }
}
1 Like
9

is there any way to use a parallax background effect for such a header image?

i’ve already tried this code as the css:

.parallax {
    /* The image used */
    background-image: url('img_parallax.jpg');

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

and this as the html in the header:

<div class="parallax"></div>

no success, yet.

10

this is going to cause problems with the infinite scrolling

3 Likes
11

As indeed it has for others

3 Likes
12

thanks for mentioning and the link, that was a big mistake. I replaced it with
width: 100%

1 Like
13

Have you tried something along the lines of position: fixed; height: 100vh (100% viewport height)?

2 Likes
15

@simon / @dax don’t we have components for this kind of stuff these days?

3 Likes
16

Now we have the theme component Big Header - Little Header for that:

7 Likes
17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.