Adding a box-shadow to the body including the menu bar

Hi there,

What about this?

.one-container .site-content {
    border: 1px solid #000;
}

Let me know :)

Hey, this also leaves out the menu bar, similar to the previous approach.

Maybe I'm not quite sure what you are trying to achieve.

Are you trying to add border on top of the menu bar?

If so we will need to take a different approach as there is currently no space there for anything to show.

You can see it in the image link I posted. I want a shadow on the right and left side of the content area, but it's leaving out the header.

Try this adding this CSS as well:

.site-header {
    box-shadow: 0 0 30px 1px rgba(0,0,0,.1);
}

Let me know :)

I already tried this, but this also adds a shadow to the bottom of the header which is then over the body.

Hi there,

it would require you to add a Wrap around the nav and the content to do that.
You would create 2 Hook Elements.

First hook

Content:

<div class="shadow-wrap grid-container">
<!-- open wrap -->

Note: the editor will add the closing </div> - delete it.
Hook: before_header
Priority: 0

Second hook

Content:

<!-- close wrap --></div>
Hook: before_footer
Priority: 10 Default

Both hooks you will want to set the Display Rules to Entire Site.

Then you can target the shadow-wrap class for your CSS

Thank you. Can you tell me how exactly that code would look like? I guess I have to put it into funtions.php?

You can use the Elements module:

https://docs.generatepress.com/article/hooks-element-overview/

That worked perfectly! Thank you!

Awesome - glad to be of help.