Tab navigation bar with arrow below the activated menu

Question

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin: 0 2px 0 0;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
        left: 42%;
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left: 81px;
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
        left: 45%;
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

I want to design an tab navigation.which should have dot bullet below it. When I click on any tab menu an arrow should display below the activated menu. The above image describe my concept. There are two tabs available and it should display in center like col-md-6 & col-md-6 format.

your code is working ( if you add the bootstrap files ) so what exactly is the problem ? — Mihai T, Jun 09 '17 at 07:58
thanks buddy but it takes align left i want to set it center as displyed in image when i write

score 0 · Answer 1 · answered Jun 09 '17 at 08:26

use also col-xs-6, col-sm-6 and col-md-6 if you want the li's to stay split 50/50 on smaller devices also. OR you could give them width:50% ( without using bootstrap classes col-* )

Also remove the margins because otherwise the li's won't fit side by side ( having width:50% )

And to center the spans ( circle and arrow ) do not use left:42% use instead left:50%;transform:translateX(-50%) where left:50% is depending on the parent (li) width, and translateX(-50%) moves the span to the left with half of it's width and thus centering in perfectly inside the li

see snippet below or JsFiddle

.tab .nav-tabs{
        border-bottom: 2px solid #ddd;
    }
    .tab .nav-tabs li{
        margin:0;
    text-align:center;
        position: relative;
    }
    .tab .nav-tabs li.active:before{
        content: "";
        position: absolute;
        bottom: -28px;
       left:50%;
    transform:translateX(-50%);
        border: 14px solid transparent;
        border-top-color: #51c2c6;
        z-index:9;
    }
    .tab .nav-tabs li.active:after{
        content: "";
        position: absolute;
        bottom: -24px;
        left:50%;
    transform:translateX(-50%);
        border: 12px solid transparent;
        /*border-top-color: #fff;*/
    }
    .tab .nav-tabs li a{
        border: none;
        padding: 20px 75px;
        font-size: 14px;
        color: #777;
        background: transparent;
        border-radius: 0;
        text-decoration: none;
    }
    /* .tab .nav-tabs li a:hover{
        color: red;
    } */
    .tab .nav-tabs li a i{
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .tab .nav-tabs li.active a,
    .tab .nav-tabs li.active a:focus,
    .tab .nav-tabs li.active a:hover{
        border: none;
        background: transparent;
        color: #51c2c6;
        font-weight: bold;
        text-decoration: none;
        transition: background 0.20s linear 0s;
    }
    .tab .tab-content{
        font-size: 14px;
        color: #777;
        background: #fff;
        line-height: 25px;
        padding: 10px;
    }
    .tab .tab-content h3{
        font-size: 26px;
    }
    @media only screen and (max-width: 479px) {
        .tab .nav-tabs li a{
            padding: 10px;
        }
        .tab .nav-tabs li.active:before{
            left: 28px;
            bottom: -24px;
            border-width: 12px;
        }
        .tab .nav-tabs li.active:after{
            left: 30px;
            bottom: -20px;
            border-width: 10px;
        }
    }
    span.round-tabs{
        width: 15px;
        height: 15px;
        line-height: 70px;
        display: inline-block;
        border-radius: 100px;
        background: white;
        z-index: 2;
        position: absolute;
         left:50%;
    transform:translateX(-50%);
        text-align: center;
        font-size: 25px;
        top: 89%;
    }

    span.round-tabs.one{
        border: 2px solid #ddd;
        color: #ddd;
    }

    li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five {
        background: #f8f8f8 !important;
        border: 2px solid #f8f8f8;
        color: #fff;
    }

    span.round-tabs.two{
        border: 2px solid #ddd;
        color: #ddd;
    }

    span.round-tabs.three{
        border: 2px solid #ddd;
        color: #ddd;
    }

    .nav-tabs > li.active > a span.round-tabs{
        background: #fafafa;
    }
    a:hover,a:focus{
    text-decoration: none;
    outline: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
            <div class="tab" role="tabpanel">
            <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec1" aria-controls="home" role="tab" data-toggle="tab" id="id1">Mission
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
                    <li role="presentation" class="col-md-6 col-sm-6 col-xs-6">
                        <a href="#Sec2" aria-controls="home" role="tab" data-toggle="tab" id="id2">Ethos
                            <span class="round-tabs one"><i class="icon icon-pencil"></i></span>
                        </a>
                    </li>
     
                </ul>
            </div>
        </div>

glad i could help. please don't forget rate/accept my answer — Mihai T, Jun 10 '17 at 15:23

Tab navigation bar with arrow below the activated menu

1 Answers1