Add Curved Separator to Header

Hello! I’m trying to add essentially a “curved bottom separator” to the header on all pages, where it bulges “downward”.

I’ve currently been trying to use the first section’s “top separator”, but I can’t get the orientation I need. Based on this screenshot, I need it to invert vertically:

How might one go about achieving such?

(P.S. I’d also like to style it with a CSS gradient, if that can be answered here too I’m sure it’ll save another post.)

Hey @Rule72,

It would be best to add a new Section then enable the Bottom Separator then choose the Angle Out design.

Gradient is not possible so it would be best that you use the header background as the section’s background then apply custom CSS to the header to achieve an overlay navbar effect. In case you are not a CSS developer, you’d need to upgrade to Pro so that you can use the Header builder to achieve the said header overlay.

You can see what I mean in the video below.

Hope that helps.

Thanks! Using X, I’d likely make it a global block then modify the page layout template.

One other thing, why do separators not display randomly despite being enabled?

Hi @Rule72,

Would you mind share you credentials so that we could take a look? To do that, please give us the following information in a Secure Note.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.