Mimic custom desktop header/nav layout for mobile

Hello, I'd like to have these changes applied on mobile:

• Remove hamburger menu
• align INFO and WORK link same as desktop version
• Hide "email and instagram" text blocks on mobile.

See desired mobile layout below.

Any help would be awesome!

chrisscholzdesign.com

CSDesign123

9 hours ago, cscholz said:

Hello, I'd like to have these changes applied on mobile:

• Remove hamburger menu
• align INFO and WORK link same as desktop version
• Hide "email and instagram" text blocks on mobile.

See desired mobile layout below.

Any help would be awesome!

chrisscholzdesign.com

CSDesign123

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 799px ) {
    .header-display-desktop {
        display: flex !important;
    }
    .header-display-mobile, .header-burger, .fe-block-1425b89ddc7a17aa23bc, .fe-block-d941bcd01fcfc8af32ab, .fe-block-bb58f3e314962daad961, .fe-block-83056773bd92df13ae77 {
        display: none !important;
    }
    .header .header-title-nav-wrapper .header-title {
        flex: 0 0 50% !important;
    }
    .header .header-title-nav-wrapper .header-nav {
        display: block !important;
    }
    header#header .header-nav-list * {
        font-size: 12px !important;
    }
}

@Web_Solutions wow, that worked perfectly - thank you!! Only thing that I noticed is that my site title is sitting slightly below the nav links by a few pixels. See pic below. Anyway of getting them all aligned?

14 hours ago, cscholz said:

@Web_Solutions wow, that worked perfectly - thank you!! Only thing that I noticed is that my site title is sitting slightly below the nav links by a few pixels. See pic below. Anyway of getting them all aligned?

Replace the previous code with the code below.

@media only screen and (max-width: 799px) {
    .header-display-desktop {
        display:flex !important
    }

    .header-display-mobile,.header-burger,.fe-block-1425b89ddc7a17aa23bc,.fe-block-d941bcd01fcfc8af32ab,.fe-block-bb58f3e314962daad961,.fe-block-83056773bd92df13ae77 {
        display: none !important
    }

    .header .header-title-nav-wrapper .header-title {
        flex: 0 0 50% !important
    }

    .header .header-title-nav-wrapper .header-nav {
        display: block !important
    }

    header#header .header-nav-list * {
        font-size: 12px !important;
    }
    header#header .header-nav-list .header-nav-item {
        padding-top: 2px; 
    }
}