Archived topic

Shadow

5 replies · Started by Ford on April 9, 2021

Viewing posts 1–6 of 6

April 9, 2021 at 9:10 pm #1728292

Hi there,

For the past hour or so, I've been trying to put a little shadow below my header, around my contained pages/posts, and above my footer—basically the whole site.

However, things haven't been working out as I end up just having the shadow below my footer after following a section of the documentation guide.

Any help is appreciated. Thank you!

April 10, 2021 at 3:53 am #1728478

Hi there,

try adding this CSS:

.site-header {
    box-shadow: 0 12px 16px -12px rgba(0,0,0,0.5);
}

The -12px value stops the shadow from bleeding around the edges of the site header on large screens.

Make sure to check it on a page w with some content as it may not be noticeable when the footer is pushed up against it.

April 10, 2021 at 9:49 am #1729010

Thanks David,

I want to do the same to my pages and footer as well. How would I go about doing so?

April 10, 2021 at 10:27 am #1729074

Try this CSS for footer:

.site-footer {
    box-shadow: 2px -12px 16px -12px rgb(0 0 0 / 50%);
}

For the content area, it seems already having box shadow?
https://www.screencast.com/t/D0hAeon8Ex

Let me know if that's not where you want to add shadow. :)

April 10, 2021 at 3:36 pm #1729248

Sorry for not updating you guys earlier. I figured it out beforehand.

Thanks for the support!

April 10, 2021 at 5:33 pm #1729294

Glad that you figured it out :)

You are welcome!

This archived topic is closed to new replies.

Start building better websites today.