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

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

General

Antimatter header

Started by Matt 8 years ago · 3 replies · 638 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.

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.

8 years ago

Nevermind! i added it to the custom.css instead and it worked a charm.. I owe you a beer!! 🍻

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 80 10 hours ago
General · by pamtbaau, 15 hours ago
1 51 15 hours ago
General · by Andy Miller, 1 day ago
0 45 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago