Add shadow to entire site

[xoa]

Hello there!

1. How can I add shadow to my entire website? I mean on the left and the right side of the header, body and footer?

2. And another question I’m interested in: let’s say I like to add shadow to a container or bar in my header with pro-header builder, whats the trick to cast the shadow only to the bottom and not to the sides of that specific container/bar?

3. What are the best settings for the top navigation bar to make the sticky and shrink effect as smooth as possible without jittering?

Thanks for all your help!

[ruenel]

Hello @xoa,

Thanks for writing in!

We cannot check your site because it has some errors. See the secure note.

1.) Are you using Pro Theme? you can make a custom header, custom footer and then apply box shadow in each of your bar settings.

The box shadow can also be applied to the section elements:

2.) It is best that you get to know more about how the box shadow works. You can check this out:

• https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

3.) To avoid the jittering of the header, you may add a trigger selector or trigger offset. This option will allow the bar to go on top of the page and will only appear after the trigger select/offset were reached as you scroll the page.

Hope this helps.

[xoa]

Hi there, thanks for your reply. Sorry for my website being offline. There was a misconfiguration in Cloudflare.

1. To add shadow to my header and footer is not a problem, but for the entire site? I attached a screenshot for you, where I added the shadow with photoshop for demostration

   
   .

2. Ok, I’ll check that out!

3. I already added a trigger amount of 40, but I don’t find it to be that smooth as I wish. but maybe it is because it does not work that well in combination with shrink amount.

[christopher]

Hi @xoa,

Our theme does not have a box-shadow feature for the container of the whole website. You will need to add custom CSS code to implement the feature. It is outside of our support scope but we will give you a starting point that you can use to create the shadow that you want.

Please kindly add the CSS code below to Pro > Theme Options > CSS:

 #x-site {
     box-shadow: 3px 3px 4px 4px rgba(0,0,0,0.2);
 }

You need to change the values to see how they affect the positioning and amount of blur for the shadow. You can also change 0.2 to a lower or higher number to force the color of the shadow to be lighter or darker.

You can learn more about the CSS Box shadow and what each value does here:

box-shadow | CSS-Tricks

For the header, you need to play with the options to find the best which suits your need. It will need some trial and error.

Thank you.

[xoa]

Hi there, thank for all your help.
May I ask for one more thing?

FIXXED THIS: So - my top nav-bar is set as a sticky bar without shrink, so it does not make that strange jitter.
But now the problem is that, the section unter the sticky bar, which in my case it the bar showing the page title and breadcrumbs, hides completely as soon as the bar goes under the nav bar. So again it does not look smooth. I played with different settings, but till now I couldn’t fix the problem.

---

FIXXED: OK, I found a solution for the problem above. I set my navigation-bar to absolute, sticky-bar, shrink 0.7, keep margin and z-index stack (<- maybe not necessary?) and added a bar with the same height under it and set this one to relative.
Now the scrolling works fine, without any jitter or jumping around.

One minor thing. I added shadow to the nav-bar also, but I don’t want it to cast the shadow to the white bar with the page title and breadcrumb. Is there a way to avoid this? But I do like to have the shadow when scrolling through the site to separate the navigation bar from the page content.

---

EDIT 2: Oh, seems that today is good day. I was able to fix also my second problem. Don’t know if my solution is a bit chaotic, but it works. I added a third transparent bar just for the shadow with the proper z-index.

If you like, you can check it out. Thanks.

[christopher]

Hi @xoa,

Glad that you managed to fix the problem

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you better support which you deserve. Maintaining a long thread is harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up on the same question.

Thank you.