Antimatter header

1

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
image.png1893×183 13.4 KB

2

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:

$home-header-height: 9rem;

scss/template/_min-tablet.scss:

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

and

.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.

3

Thanks Herb, unfortunately, that doesn’t appear to work for me :frowning:

If i put box shadow:

 .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
image.png728×161 3.55 KB

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

Any more help would be greatly appreciated.

4

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