How to change header height/logo size in quark theme?

Support
1

Hi there,
I just installed grav with the quark theme. I changed the logo against my own logo which is much too small now.
How can I change the size of the logo or the header? I think i have to change the header height and the logo will resize automatically?
Thanks in advance!
Best regards
Silas

2

@silaz, Follow these steps to alter the size of the logo:

  • Create an inherited theme to prevent a future upgrade of Quark to undo your changes.
  • In your inherited theme create file ‘/user/themes/mytheme/css/custom.css’
  • Add the following snippet to ‘custom.css’:
    /* Override logo for unscrolled page */
#header .logo img,
#header .logo svg {
  display: inherit;
  height: 42px;
}

/* Override logo for scrolled page */
body.header-fixed.header-animated #header.scrolled .logo img,
body.header-fixed.header-animated #header.scrolled .logo svg {
  height: 28px;
}
  • Replace height: 42px and height: 28px with your preferred sizes.
2 Likes