[Resolved] Adding a box-shadow to the body including the menu bar

[Florian]

Hey,
I want to add a box-shadow to the whole middle part, but when I add it to the “content” area, the shadow is not applied to the primary menu (see https://i.imgur.com/cuwHcDv.png).
Can you tell me how I can target the whole middle part including the menu bar?

[Leo]

Hi there,

What about this?

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

Let me know 🙂

[Florian]

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

[Leo]

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.

[Florian]

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.

[Leo]

Try this adding this CSS as well:

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

Let me know 🙂

[Florian]

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

[David]

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

[Florian]

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

[David]

You can use the Elements module:

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

[Florian]

That worked perfectly! Thank you!

[David]

Awesome – glad to be of help.

[Author]

Posts