Legacy header responsiveness

You have a fixed height that needs to be removed or changed when viewed on mobile devices. So add something like this to your responsive section –

#header {
    height: auto;
}

By default the widget area shouldn’t overlap the header, it’s supposed to show up under the logo/title area. It looks like you’ve made some customizations to your css which is the reason why it’s not showing up right. For example, on line 3511 this should just be margin instead of margin-bottom –

#header .widget-area {
    margin-bottom: 100px 0px 20px 0px;
    padding: 0 0 10px;
}

So try and go through all of the custom code you added to make sure everything is properly setup. You may just have to add some bottom margin to the title area to separate it from the widget area.