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

Antimatter header

Started by Matt 8 years ago · 3 replies · 733 views
8 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
8 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
8 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 jean-louis67, 3 days ago
2 84 2 days ago
General · by Andy Miller, 7 days ago
0 147 7 days ago
General · by Veehem, 1 week ago
0 146 1 week ago
General · by milkboy, 1 week ago
0 142 1 week ago
General · by ian russell, 2 weeks ago
2 226 2 weeks ago