CODEWITHSUNDEEP
csshtmldesign-patternsnavbar
prisel
prisel

Reputation: 337

Nav bar border issue using css

In my case I am having a nav bar(two tabs) with green border. Below this there is a container with green border. For active tab border-bottom should be white and another tab should be green. So I changed border-bottom:1px solid #fff for active tab alone. This case is working fine is large and medium device. But in small device green line is still displaying under active tab which is the border of the container present under the nav.

HTML Code:

    .tab-links:after {
    display:block;
    clear:both;
    content:'';
    }
.tab-links li {
    margin:3px;
    float:left;
    list-style:none;
    }
.tab-links a {
    background:none repeat scroll 0 0 #dfdfdf;
    border:1px solid #c3c3c3;
    color:#484e2a;
    display:inline-block;
    font-family:open_sansbold;
    font-size:11px;
    min-width:166px;
    padding:8px 4px;
    text-decoration:none;
    transition:all .15s linear 0s;
    }
.tab-links a:hover {
    background:#a7cce5;
    text-decoration:none;
    }
li.active a, li.active a:hover {
    background: #fff;
    border:1px solid #dddfb0;
    border-bottom:1px solid #fff;
    color:#484e2a;
    }
.tab-content {
    padding:15px;
    background:#fff;
    border:1px solid #dddfb0;
    margin-top:-20px;
    }
.tab {
    display:none;
    }
.tab.active {
    display:block;
    }

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
    </ul>
</div>

<div class="tab-content">
    <div id="tab1" class="tab active">
      <p>Test Content 1</p>
    </div>

    <div id="tab2" class="tab">
      <p>Test Content 2</p>
    </div>
</div>

JS Fiddler link:

https://jsfiddle.net/ktncf454/

Upvotes: 0

Views: 379

Answers (2)

Karan Batra
Karan Batra

Reputation: 106

@padamapriya :

I did few modifications for you..:

.tab-links li {
    margin: 3px;
    float: left;
    list-style: none;
    position: relative;
    z-index: 1;
    margin-bottom: 2px;
}

.tab-content {
    padding: 15px;
    background: #fff;
    border: 1px solid #dddfb0;
    margin-top: -20px;
    position: relative;
    z-index: 0;
}

Hope this helps!!!!

Upvotes: 1

Jagtar Singh
Jagtar Singh

Reputation: 21

You will have to write the media query for the this scenario.Generally what happens on different devices the navbar adjust himself automatically.so writing the media query you can change the border for the container and for the tab.

It will good if you share your source code or create a jsfiddle so that we can test and give you the proper solution.

Upvotes: 0

Related Questions