Mobile Header Transparency – Logo & Menu Overlap

Hi,

I’m a new user to the Enfold theme and find everything really helpful. On this topic post, https://kriesi.at/support/topic/opaque-header-on-small-screens/?login_error, I implemented this code in the Quick CSS in order to make my mobile header transparent:

.av_header_glassy.av_header_transparency #header_main {
    background-color: rgba(0, 0, 0, 0.4);
}

and

@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background-color: transparent;
    position: absolute!important;
}}

But, while this has allowed the header to be transparent (as it was before in Desktop view), my Header Logo and Menu Icon are now falling right on top of the 1st part of the page.

I also entered this code as suggested in the post I cited in order to try to move the content down, but that didn’t work:

.av-special-heading.av-special-heading-h1.custom-color-heading.blockquote.modern-quote.avia-builder-el-1.avia-builder-el-no-sibling.av-thin-font.av-inherit-size {
margin-top: 52px;
}

I’ve entered the website below. Any suggestions will be appreciated.

• This topic was modified 9 years ago by Michael. Reason: RESOLVED. Can close this as I realized what I was doing wrong! :)