How to make navigation appear under logo in mobile view?

Hello! I would like my navigation pages to appear beneath my logo. It works in ‘desktop view’ but when I switch to ‘mobile view’ my navigation pages are put into a menu on the side. I want them to stay in the middle under my logo. Can anyone help with some custom CSS? 
I have attached an image of what the issue is 🙂 

5 hours ago, Isha08 said:

Hello! I would like my navigation pages to appear beneath my logo. It works in ‘desktop view’ but when I switch to ‘mobile view’ my navigation pages are put into a menu on the side. I want them to stay in the middle under my logo. Can anyone help with some custom CSS? 
I have attached an image of what the issue is 🙂 

What is the website URL?

8 hours ago, Web_Solutions said:

What is the website URL?

it’s http://reindeer-platinum-sgy9.squarespace.com/ 

password is: Thestudio2024

Use this CSS code

@media screen and (max-width: 991px) {
    .header-layout-nav-center .header-title {
        max-width:70px
    }

    .header-display-desktop {
        display: flex !important
    }

    .header-display-mobile {
        display: none
    }

    .header-burger {
        display: none
    }

    .header-nav {
        display: flex !important
    }

    .header-nav {
        display: flex !important;
        flex: 70% !important;
        justify-content: center
    }

    .showOnDesktop .header-actions-action.header-actions-action--cart {
        display: none
    }

    nav {
        flex-wrap: nowrap !important
    }

    nav a {
        font-size: 10px;
        margin-left: 10px;
        margin-right: 10px
    }

    .header-title-logo {
        text-align: center
    }
}