Siteorigin hero section overlay header menu

Hi, first of all tks for this amazing themes and an amazing job, is it possible to create an overlay of the header with Siteorigin hero to make it look like the frontpage? This look something like this ? I’m using the frontpage template, an looked around the forums but can’t seem to find a code to apply.

Tks, have a nice day!

Hello there,

Thank you for reaching out to us here.

To achieve such that objective, you should split the SiteOrigin Hero widget in a single row. Then that edit row > Row Styles > Themes > set a background image. The overlay will appear automatically if the background image is set.

I hope this reply helps.


Hello Kharis,

Ty for your response i’ve followed the instructions and have hero singled in a row with the background now in the row as cover, but still have the header menu in top with no overlay.

Is weird, let me show you what im looking at, from chrome with the editor logged in looks like this Chrome explorer vew like nothing changed, then from edge looks like this Edge explorer vew has an overlay but also has a small gray strip at the top of the page.

I’m working on child theme and my custom css only had been:

//Get the menu down to the logo area
margin-top: 35px;

// in preparation for a second call to action button on main page
.roll-button {
margin: 10px;

//to fix sticky header in the inside pages
.site-header.fixed {
position: fixed !important;

Ty very much for your time and service!

> has an overlay but also has a small gray strip at the top of the page.

Try adding the following CSS code, please.

.page-id-255 .site-header{
  background-color: transparent;

#pg-255-0 .panel-row-style{
  background-attachment: scroll !important;  
  background-position: top center !important;


Great! It worked, tks a lot Kharis, rated 5 on themes rated 5+ on service! U r the best guys!