337
Views
4
Comments
Solved
Tab Styles
Question

Please help me to design the tab like above picture.

How to merge the second tab with the background .

I tried and comes like below:

2018-08-26 20-34-32
Pankaj pant
Solution

Neha George wrote:

Please help me to design the tab like above picture.

How to merge the second tab with the background .

I tried and comes like below:

Hi Neha,


If you are using silk Tabs then you can use the below CSS to overwrite the existing tabs CSS.


SyntaxEditor Code Snippet

.Tabs {
    border: 0px solid #ccc;
   
}

.Tabs_header {
    background: #efefef;
    
}

.Tabs__tab {
    
    border-bottom: 0px solid #ccc;
    border-left: 0px solid #ccc;
    border-right: 0;
    border-top: 0px solid #ccc;
    display: inline-block;
    
}

It will look like that..


Regards,

Pankaj

2019-05-22 11-30-09
Marcelo Ferreira

Hi Neha,

You need to use css for that. Can you share an example of what you already have?

Regards,

Marcelo

UserImage.jpg
Ellakkiya

Neha George wrote:

Please help me to design the tab like above picture.

How to merge the second tab with the background .

I tried and comes like below:

Hi Neha George,

 Add the background color for the tab header item 

SyntaxEditor Code Snippet

.tabs-header-item{
background-color:#xxxx;
}

Regards

Ellakkiya.S

2018-08-26 20-34-32
Pankaj pant
Solution

Neha George wrote:

Please help me to design the tab like above picture.

How to merge the second tab with the background .

I tried and comes like below:

Hi Neha,


If you are using silk Tabs then you can use the below CSS to overwrite the existing tabs CSS.


SyntaxEditor Code Snippet

.Tabs {
    border: 0px solid #ccc;
   
}

.Tabs_header {
    background: #efefef;
    
}

.Tabs__tab {
    
    border-bottom: 0px solid #ccc;
    border-left: 0px solid #ccc;
    border-right: 0;
    border-top: 0px solid #ccc;
    display: inline-block;
    
}

It will look like that..


Regards,

Pankaj

UserImage.jpg
Neha George

Thank you all :) .. All your suggestions helps me a lot

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.