Jump to content

Tab button only works if clicked on the top half

Recommended Posts

Site URL: https://insidejobleaders.com/programs

Hello! 

My first attempt at creating a website with no background in coding.

I followed some tips online on how to create a tab section and it worked out well. However, in order to select a tab you have to click on the top half of the button. What do i adjust to make it so the whole button is clickable?

Thank you!

 

https://insidejobleaders.com/programs

Password: Liza

 

Help.JPG

Link to comment
  • Replies 3
  • Views 517
  • Created
  • Last Reply

Hi tuanphan!

i used: https://www.will-myers.com/articles/adding-simple-tabs-to-your-website-in-squarespace-71-and-70

 

CSS: 

.tabs-container{
  transform:translateY(100%);
  width:100% !important;
  text-align:center;
  border-bottom: 1px solid #999;
  overflow: auto;
  overflow-x:auto;
  white-space: nowrap;
  z-index:99;
}
.tab-btn{
  max-width:150px;
  display: inline-block;
  border-radius:3px 3px 0 0;
  border:1px solid #999;
  padding: 12px 18px;
  font-size:1.2em;
  background:white;
  margin-bottom:none !important;
  border:none !important;
  &:not(:first-of-type){
  margin-left:10px;    
  }
}
.tab-btn.active{
  background:lightblue;
}

.tab-section-hide{
  display:none;
}
.tab-section-show{
  display:block;
}
Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.