Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
DD Tabs Overlap Update

DD Tabs Overlap Update

This is an update for DD Tabs Page Layout. If you are experiencing the tabs overlaps each other when your tab title gets too long, this is a fix for that.

1) Log into your Weebly account

2) Click into “design” and into “edit html/css” to open the code editor

3) Click on “main_style.css” to open the css editing page

4) Here locate this section of code:

dd-tab-old

 

Click to enlarge image

5) REPLACE the entire section of code shown above with this:

/* ---------------------------- DD TAB ------------------------------------------ */ 
.button { text-align:center; position:relative; z-index:10; -webkit-transform:translateZ(0); }

.button a {
  position:relative;  
  z-index:10; 
  text-align:center;
  display:block; 
  cursor:pointer;
  padding:10px 0; 
  text-transform:uppercase; 
  letter-spacing:2px; 
  -webkit-transition:all .2s; 
  -moz-transition:all .2s; 
  transition:all .2s;
  text-decoration: none;
  white-space: nowrap;
}

.button a .arrow {
  content:''; 
  position:absolute; 
  z-index:9; 
  left:50%; 
  bottom:0px;
  width:0; 
  height:0;
  margin-left:-12px; 
  border-left:12px solid transparent;
  border-right:12px solid transparent; 
  border-top:12px solid #222;
  -webkit-transition:all .2s; 
  -moz-transition:all .2s; 
  transition:all .2s;
  -webkit-transform:translateY(0px); 
  -moz-transform:translateY(0px); 
  transform:translateY(0px);
}

.button.active a .arrow { -webkit-transform:translateY(12px); -moz-transform:translateY(12px); transform:translateY(12px); }

#tabs_container {
  width: 100%;
  float: none;
  text-align: center;
}

#tabs {
  margin: 30px 0;
  list-style: none;
  -webkit-padding-start: 0;
}

#tabs li {
  display: inline;
  line-height: 400%;
  background: none !important;
}
#tabs li.active{background: none !important;}

.tab-button a{
  display:inline; 
  padding: 8px 18px;
}

.tab-button a .arrow {bottom: -9px;}

#tabs_content_container{padding: 0 2%;}

#icontent .tab_content{
  min-height: 300px;
  border: 1px #ccc solid;
  margin-bottom: 40px;
}

#tab2, #tab3, #tab4, #tab5, #tab6 {display:none;}

#icontent #tab2, #icontent #tab3, #icontent #tab4, #icontent #tab5, #icontent #tab6 {display:block;}


/* -------------------------------------------------------------------------------/
CUSTOMIZATION AREA - HERE YOU CAN CUSTOMIZE SOME PROPERTIES OF THE THEME BELOW
/ ------------------------------------------------------------------------------ */

/* -------------------------------------------------------------------------------/
     TAB STYLING
/ ------------------------------------------------------------------------------ */
/* Edit Tab Font Styling */
.button a {
  font-weight: 500; 
  font-size: 18px;
  font-family: 'Open Sans', sans-serif; 
  color: #efefef; 
}

/* Edit Tab Color */
.button a, #tabs li { background:#222 !important;}


/* Edit Tab Arrow Color */
.button a .arrow {  border-top-color: #222;}
  

/* Edit Tab Hover Color */
.tab-button .active a, #tabs li.active { background:#47acad !important; color:#ffffff; }


/* Edit Tab Arrow Hover Color */
.desktop .button a:hover .arrow, .tab-button .active a .arrow { border-top-color: #47acad;}


You can also download the code file here: dd tab overlap css code update

Make sure you open the file with NOTEPAD for pc or TEXTEDIT for MAC. Copy all the codes inside the document and replace the code shown in STEP 4

6) Save your change and republish your site

 

 

 

 

Tags: , , , , , , , , , , , , , ,