I can't figure out how to create a tab style header

I want to create a tab style header similar to this (so each tab links to the pages on our site): 

However, it seems I can only add one "button", not multiple and it is still giving this drop down menu: 

I didn't create our site, so it might be something very simple, but all tutorials I see is CSS (I'm very new to coding so I'm afraid of breaking it if I try this!). 

Any help is appreciated!!! 

Taighan x

Can you share your website URL?

It looks like whoever designed your website added some code to force the mobile navigation (with the hamburger menu) to be available on desktop.

Hi @Ziggy! 

Yes I just discovered this. 

Below is the code. I think it the section toward the end - I've got no training in code (am having fun learning though!).  Are you able to tell me what needs to change in order to remove the hamburger menu from our desktop version? 

@font-face { 
font-family: 'GraphikBold';
src: url(https://static1.squarespace.com/static/62b9836ea2d8764608c958cc/t/62c2ec922773c847a99cd767/1656941714845/GraphikBold.otf)
}

h1 {
font-family: 'GraphikBold', alternative-web-safe-font;
}

header#header *, footer.sections * {
    font-family: GraphikRegular;
}

@font-face { 
font-family: 'GraphikMedium';
src: url(https://static1.squarespace.com/static/62b9836ea2d8764608c958cc/t/62c2edd66bd1bb4a06de002d/1656942038597/GraphikMedium.otfhttps://static1.squarespace.com/static/62b9836ea2d8764608c958cc/t/62c2edd66bd1bb4a06de002d/1656942038597/GraphikMedium.otf)
}

h2 {
font-family: 'GraphikMedium', alternative-web-safe-font;
}

@font-face { 
font-family: 'GraphikRegular';
src: url(https://static1.squarespace.com/static/62b9836ea2d8764608c958cc/t/62c2eee7bf9aba464da4349e/1656942311264/GraphikRegular.otfhttps://static1.squarespace.com/static/62b9836ea2d8764608c958cc/t/62c2eee7bf9aba464da4349e/1656942311264/GraphikRegular.otf)
}

h3 {
font-family: 'GraphikRegular', alternative-web-safe-font;
}

.homepage #site-title {
  display: none !important;
}
.header-menu-nav-item a {
    font-size: 24px;
}
.header-burger { display:flex!important}
.header--menu-open .header-menu {opacity: 1!important;visibility: visible!important;}

.header-nav, .header-actions {visibility:hidden!important}

Amazing! Thank you!

6 minutes ago, Taighan said:

Amazing! Thank you!

Glad that worked!