Header height (.bigheader and .smallheader)

Front page Support Forums Kanso Theme Support Header height (.bigheader and .smallheader)

This topic contains 4 replies, has 2 voices, and was last updated by  Tuktop 2 years, 5 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #3190


    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!



    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.

    Andrii / Satori Studio



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



    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



    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!

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.