Jump to content

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

Go to solution Solved by Ziggy,

Recommended Posts

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

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

image.thumb.png.0cbeb58d7a2402ee413ce2f49f27977c.png

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

Edited by Taighan
Adding tags
Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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}

Link to comment
  • Solution

Remove this (highlighted yellow) and see what happens:

image.thumb.png.2775571b5e2e326b0d8c2bd835243db3.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
6 minutes ago, Taighan said:

Amazing! Thank you!

Glad that worked!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.