Skip to content
● Grav 2.2 is out: 2x faster cold starts and 96% less memory on big sites. Read the announcement →

Antimatter header

Started by Matt 9 years ago · 3 replies · 867 views
9 years ago

Hi,

I'm removed the .flush-top part in the CSS so i now have a white section above the showcase image.

However, the gap between the top of the browser and the top of the image is large. Is there anyway to decrease it?

image|690x66

last edited 03/03/18 by Matt
9 years ago

I've actually had to make it larger (9rem) for a site and dug this up which might help you get started:

scss/template/_custom.scss:

TXT
$home-header-height: 9rem;

scss/template/_min-tablet.scss:

CSS
.fullwidth header#header {
    height: $home-header-height !important;
}

and

CSS
.fullwidth #body {
    padding-top: $home-header-height;
}

I'm sorry I can't remember if this references custom classes etc but it might give you pointers.

1 reply
9 years ago

Thanks Herb, unfortunately, that doesn't appear to work for me 😦

If i put box shadow:

CSS
 .modular.header-image #header {
 background-color: rgba(255, 255, 255, 0);
 box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); }

i get this:

image|690x152

so it's the space between showdown modular and the nav / header.

Any more help would be greatly appreciated.

Suggested topics

Topic Participants Replies Views Activity
General · by Andy Miller, 6 days ago
0 106 6 days ago
General · by lynbor, 4 weeks ago
3 436 2 weeks ago
General · by lynbor, 3 weeks ago
7 555 2 weeks ago
General · by Harry, 2 weeks ago
0 159 2 weeks ago
General · by Old Man Umby, 1 month ago
2 308 3 weeks ago