Increase header size when using Graceful theme

We’ve been modifying the CSS from this theme a bit, & we’re trying to identify how to increase the banner at the top of the screen. Any tips on how to do this?

Can you show us a mock-up of how you want to change it?

So currently this is how the banner at the top of the site looks:

We’re just trying to increase the height to something like this:

So far we’ve only been able to increase the logo image size. No success with the banner.

1 Like

It’s the header, not a banner. You can take a look to this component Big Header - Little Header, however the CSS target is

.d-header {
    height: <value>;
}
8 Likes

Now I just feel silly lol.

Thanks!

@dax, I’m on the same team with @LlamaSensei. What we really want to do is the increase the navbar height. I did not find the relevant code in CSS. Should we add a code to achieve this?

Are you talking about this bar at the top of the site? (if not please provide a screenshot)

That’s .d-header as shown in the example CSS above

6 Likes

Yes that one and I tried the editing the height in .d-header but it didn’t* work.

Where/how are you editing it? I’m assuming you’re editing the theme directly?

If you’re editing the theme and adding it to common it won’t work, because it’s defined in desktop (and you’d need to add it to the end of desktop). The C in CSS stands for Cascade, so you need to be sure that you’re making changes to .d-header after where it exists in the theme.

I highly recommend creating a new theme component, adding your custom CSS there, and then add the component to the theme (rather than editing the theme directly). It would avoid this problem, and ensure your edits aren’t overwritten when the theme is updated.

8 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.