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

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 …

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 w…

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=""> <img class="brand-logo" src="<!-- link to big log…

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; …

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 de…

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.

[תמונה] simon: 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. It turns out that Discourse adds the class .discourse-touch for touch screens. Adding something like this will give you a…

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 */ b…

[תמונה] Pad_Pors: /* Full height */ height: 100%; this is going to cause problems with the infinite scrolling

[תמונה] riking: this is going to cause problems with the infinite scrolling As indeed it has for others [תמונה] Scrolling does not work on some topics with CSS body height set to 100% support My users and I are having a strange issue on our discourse instance, scro…

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

תמיכה

dax (Daniela) 4 במרץ,‏ 2019,‏ 9:10am 16

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

נושא		תגובות	צפיות
Trying to use a large top logo - unsuccessfully! Support	13	2910	8 ביוני,‏ 2024
Change header and logo size on home page UX	5	3516	11 באוגוסט,‏ 2020
Disable the topic to show in the header / change logo size Feature	7	2033	23 ביולי,‏ 2015
CSS to increase height of logo and header in dektop <> Mobile view Development css	17	973	1 במרץ,‏ 2024
Image not filling header container Support	19	2164	7 במאי,‏ 2020

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

נושאים קשורים