[Support request] Enable box shadow on search bar

[William]

Hi there,
I am trying to enable box shadow on the header search bar here. However, it seems to be cropped/cut. Is there a way to add CSS to this search bar to create a box shadow of:

box-shadow: 2px 2px 4px rgba(0, 0, 0, .4);

Or to allow the margins to increase so the current box-shadow shows?

Kind regards,

Will

[Leo]

Hi there,

Looks like the search bar in the header is coming from another plugin.

Have you checked with their support team first?

They would know how to modify or apply the CSS to their content better.

[William]

Hi there,
Yes I am able to add shadow as per the image for the plugin:

However, this does not translate onto the site for some reason. You can see a snippet of the shadow just about in the bottom right, and that is all. I think its something to do with the size of the space allowed for the search bar by the theme?

[Elvin]

Hi,

I’ve checked the whole site for what might cause this issue and found that this is from an overflow:hidden property set on header widgets.

To fix this, you can try adding this CSS code:

.header-widget {
    overflow: visible;
}

Here’s how to add CSS. https://docs.generatepress.com/article/adding-css/

[William]

That’s perfect thanks!

[Elvin]

Nice one.

No problem. 🙂

[Author]

Posts