Skip to content
Grav 2.0 is officially stable. Read the announcement →
Support

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

Started by Silas 6 years ago · 1 replies · 1890 views
6 years ago

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

6 years ago

@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':

    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

Suggested topics

Topic Participants Replies Views Activity
Support · by Paul Hodges, 4 weeks ago
19 491 6 days ago
Support · by Lauw, 1 week ago
2 107 1 week ago
Support · by Anna, 3 weeks ago
4 431 1 week ago
Support · by gtx, 4 weeks ago
4 380 3 weeks ago
Support · by Anna, 1 month ago
9 487 4 weeks ago