Site title under navigation items

Hi, I'm having a hard time trying to move the site title under the navigation links, while giving them full screen space with css. Below you will see an image of what I would like for it to look like. Can anyone help me?
 

@Kelly_Claessens Hi! Can you share your site URL for context? 

@Lesum Hi! Yes, sure!
Here it is: https://tuba-grouper-l9rn.squarespace.com/

At the moment I've taken out the site logo and added an image below but when displaying on the phone, it doesn't work correctly as the burger menu is above the site title logo which should be next to it.

So my idea is to invert the site logo with the navigation using the centered design, plus taking out the wrap on the navigation list and the site logo so it can take all the screen space, does it make sense?

On 8/23/2024 at 7:18 PM, Kelly_Claessens said:

At the moment I've taken out the site logo and added an image below but when displaying on the phone, it doesn't work correctly as the burger menu is above the site title logo which should be next to it.

So my idea is to invert the site logo with the navigation using the centered design, plus taking out the wrap on the navigation list and the site logo so it can take all the screen space, does it make sense?

The site is private, you can follow this guide to share url correct way

@tuanphan Sorry! It has a password now:

https://tuba-grouper-l9rn.squarespace.com/
Password: LFS972024

Thanks!

On 8/23/2024 at 7:18 PM, Kelly_Claessens said:

At the moment I've taken out the site logo and added an image below but when displaying on the phone, it doesn't work correctly as the burger menu is above the site title logo which should be next to it.

So my idea is to invert the site logo with the navigation using the centered design, plus taking out the wrap on the navigation list and the site logo so it can take all the screen space, does it make sense?

You can use this code to Website Tools > Custom CSS

@media screen and (max-width:991px) {
	.header-title-nav-wrapper {
    max-width: 100%;
}
    .header-title {
        display: none;
    }
.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: 100% !important;
    justify-content: center;
}
.showOnDesktop .header-actions-action.header-actions-action--cart {
    display: none;
}
    .header-nav-item {
    padding: 5px !important;
    margin: 0 !important;
}
    div.header-nav-item * {
        font-size: 5px !important;
    }
    div.header-announcement-bar-wrapper {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }
}