Moving title and menu above banner image on mobile

Hello, 

My client would like the site title and hamburger menu to be above the banner image on mobile, in the white "border" space. He has found a site to show what he'd like (Cobb Haus) and taken screenshots to show what he'd like. I've attached that below. 

I appreciate any assistance.

Site URL: https://www.lakehelenvacationhome.com/

@tuanphan You are so incredibly helpful and appreciated. Thank you. Yes, it did work. The only slight issue I'm seeing is that there seems to be a bit too much padding above the site title and menu on mobile. See attached image (and please pardon blue light blocking software visible in screenshot).

On 3/9/2023 at 12:41 PM, tiffanydavidson said:

@tuanphan You are so incredibly helpful and appreciated. Thank you. Yes, it did work. The only slight issue I'm seeing is that there seems to be a bit too much padding above the site title and menu on mobile. See attached image (and please pardon blue light blocking software visible in screenshot).

Use this new code

@media screen and (max-width:767px) {
header#header {
    position: static !important;
margin-top: 0px !important;
}
.header-announcement-bar-wrapper {
    padding-top: 0px !important;
}
a#site-title {
    color: black !important;
}
.burger-inner>div {
    background-color: black !important;
}
}

Perfect @tuanphan ! Thank you again ❤️