New Front EN › Support Forums › Kanso Theme Support › Header height (.bigheader and .smallheader)
- This topic has 4 replies, 2 voices, and was last updated 9 years, 4 months ago by
Tuktop.
-
AuthorPosts
-
May 2, 2014 at 2:36 pm #3190
Tuktop
ParticipantHello!
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!
May 3, 2014 at 2:47 pm #3202satori
KeymasterHey 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 StudioMay 3, 2014 at 2:49 pm #3203Tuktop
ParticipantAhhh, i was almost there :) but missed the logo img css.
It’s perfect now.
Thanks once again for helping me out!May 3, 2014 at 4:36 pm #3208satori
KeymasterGlad 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
May 3, 2014 at 4:39 pm #3209Tuktop
ParticipantThat 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!
-
AuthorPosts
- You must be logged in to reply to this topic.