Header height (.bigheader and .smallheader)

[Tuktop]

Hello!
Could you give me some pointers to how i can change the height of the header?
I know it can quite easily be done with some CSS but when i started changing stuff, it started to look weird because i’m not CSS-hero :) (for example, the logo didn’t scale so it ended up overlapping below the menu)

My client would, for example, like to see how the website looks with a header that is always 75px, or maybe 100px initially (instead of 150), then back to the normal 75px when scrolling starts. I hope i made myself clear.

Once again, thanks in advance for your support!

[satori]

Hey there,

please try this custom CSS:

#header, .bigheader { height: 100px !important; }
#logo img { max-height: 100px; }
#header .smallheader { height: 75px !important; }

the first two rows tell the initial header and the logo to be 100px in height, and the last row makes sure that the scroll header remains 75px; you can of course change the values to whichever ones fit you most ;) just make sure that the second line’s value is the same as the first line’s, otherwise the logo might stretch beyond the heading.

Sincerely,
Andrii / Satori Studio

[Tuktop]

Ahhh, i was almost there :) but missed the logo img css.
It’s perfect now.
Thanks once again for helping me out!

[satori]

Glad to hear it worked!
I’m thinking about introducing such a setting to the Theme Options panel, now that you’ve mentioned it :)

A. / Satori Studio

[Tuktop]

That would certainly be a great addition to the theme! It is already a really versatile, neat and tidy theme, but adding custom menu height properties would make it even better :) GJ!

[Author]

Posts