Mobile Header Layout for Brine Family (The Maple Inn Template) on Version 7.0

Wondering how I can make the mobile header more like the desktop version on the right. Thank you so much for your help. 

You mean header or banner under header? 

If header, replace burger with 5 navigation items?

If banner, reduce text size on mobile or?

I would like the banner to look like the bottom photo on mobile. The top photo is what it currently looks like.

Would there be a way to center the grey block of code in the center of the image?

On 7/8/2024 at 11:34 PM, edmundotai1991 said:

Would there be a way to center the grey block of code in the center of the image?

 

You can change to this new code

@media screen and (max-width: 767px) {
    body.homepage .Parallax-item:first-child img {
        width:100% !important;
        height: auto !important;
        left: 0 !important;
    }

    section#mtn {
        min-height: unset !important;
        height: 160px !important;
    }

    section#mtn * {
        font-size: 16px !important;
    }
    section#mtn .code-block {
        top: 20px;
        position: relative;
    }
    section#mtn .spacer-block {
        display: none;
    }
}