Customize Header Nav Links

Can someone please help me customize the navigation links to appear as shown in the screenshot? I've tried a billion different things and just keep making things worse.

Thank you!

Can you share your website URL?

How do you have the header set up currently?

https://mushroom-caterpillar-yw24.squarespace.com/

password = demo

Thank you!

Right, here's a start, can you remove the border you've added in Custom CSS, and replace it with this:

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
  flex: 0 0 100%;
}
.header .header-announcement-bar-wrapper {
  padding-top:0px !important;
  padding-left:0px !important;
  padding-right:0px !important;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
  margin: 20px 0 0;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
  margin:0px;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-item {
  width:25%;
  outline: 1px solid;
}

When you've installed this, please let me know and we'll see what's worked and what hasn't and go from there.

Thanks! I've added that code. I really appreciate your help!

Can you also add this below the rest of the CSS I provided:

.header-nav-list {
  width:100% !important;
}
.header-nav-item--active a {
   background-image: none;
}

That's awesome! The site header now disappears on mobile, but desktop looks great!!!!

Hurray! Thank you so so so much!!!

35 minutes ago, StudioFC said:

Hurray! Thank you so so so much!!!

No problem! Can you give my post a thumbs up? Thanks!