Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
unknownunknown15

Tab button only works if clicked on the top half

Asked by unknownunknown15

Question

unknownunknown15    0

unknownunknown15
Posted

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

Share this post

Link to post

3 answers to this question

Recommended Posts

  • 0

tuanphan    8,019

tuanphan
Posted

Which code did you use? Can you post here?

 

unknownunknown15 reacted to this

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post
  • 0

unknownunknown15    0

unknownunknown15
Posted

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;
}

Share this post

Link to post
  • 0

tuanphan    8,019

tuanphan
Posted

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.

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Go To Question Listing
×
×
  • Create New...

Support

Community

Developers

Resources