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 · 1745 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 Water Science, 3 weeks ago
11 170 7 hours ago
Support · by Duc , 22 hours ago
1 44 22 hours ago
Support · by Thomas, 1 week ago
3 116 1 day ago
Support · by Anna, 4 days ago
2 109 2 days ago
Support · by Justin Young, 2 days ago
1 89 2 days ago