hide menu on mobile

Also, the background of the header on mobile should be white and the hamburger menu should be bigger. I can't find how to do this. Do I also need custom css for this?

This should do it, i added the color change as well:

@media (max-width: 768px) {
    #masthead {
        display: block !important;
        opacity: 1;
    }
    .inside-header .site-logo {
        display: none;
    }
    .inside-header.grid-container {
        padding-bottom: 0;
    }
    .header-widget {
        margin-bottom: 0 !important;
        font-size: 0;
    }
    .main-navigation.mobile-header-navigation {
        background-color: #fff;
    }
}

perfect, thanks a lot!

Glad to be of help.