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
  • Created
  • Last Reply

Top Posters In This Topic

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

Hi. Missing your comment. Above link doesn't exist.

You can also use this plugin to create Tabs (&accordion), easy to install/customize without coding skills.

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.