However, I only wanted it to be detached on the front page which I am using a page hero header element on. With the css in customize, it applied the detachment to all pages, which makes the logo an overlay on all other pages content.
My question is:
How to detach the logo with the above specifications only on the front page? could it be done within the page hero content (if I enable display rules for front page and exclude the entire site). Or is there a front page specific css I can add to customizer?