Header design

[JulienB]

Hi,

1. Is there a built-in way to make the top header smaller (in terms of height) ?
2. Also, is it possible to make the header slightly transparent so it goes on top of the top picture on the page? (as on this website: https://www.yellowleafhammocks.com/)

Thanks

[Kyle – SUPPORT]

Hi

1) In Header Options > Logo Option reduce the top/bottom spacing

2) I can do this with some custom css, please set a page with naked header and provide me with the link

– Kyle

[JulienB]

This reply has been marked as private.

[Kyle – SUPPORT]

You can only have a transparent header when you’re using a swift slider or image row at the top of your page

– Kyle

[JulienB]

This reply has been marked as private.

[Kyle – SUPPORT]

You need to set Header – Naked in Page Meta Options > Page Header/Slider Options

– Kyle

[JulienB]

Thanks Kyle. It does work. It is totally transparent though. I’d like to have an overlay behind as on the link I sent before. Is it just some pure CSS or is there a way to adjust that on the panel somewhere?

[Kyle – SUPPORT]

Add this to your custom css:

.header-wrap[class*="page-header-naked"] #header-section #header, .header-wrap[class*="page-header-naked"] #header-section.header-5 #header {
  background: rgba(255,255,255,0.5)!important;
}