Skip to content
Grav 2.1 is out: every page speaks Markdown. Read the announcement →

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

Started by Silas 6 years ago · 1 replies · 1937 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 blu3prince, 4 days ago
1 86 20 hours ago
Support · by complanar, 1 week ago
6 168 2 days ago
Support · by Rick Beebe, 1 week ago
2 126 4 days ago
Support · by alex, 6 days ago
2 114 5 days ago
Support · by Marcel, 2 weeks ago
1 159 5 days ago