CODEWITHSUNDEEP
csstwitter-bootstrapnavigationbordernavbar
Tania Rascia
Tania Rascia

Reputation: 1775

Make the border even around Bootstrap navbar?

This is my first post, although I've been benefitting from Stack Overflow for quite some time.

I just created a site for practice, but I'm having an issue with the borders around the navbar.

Here's the convoluted code I'm using:

@media (min-width: 768px) {
.navbar-nav > li > a:first-child {

    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a:last-child {

    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}}

The aim is to have a 2px border all the way around.

Unfortunately, this is leading to some issues -

Upvotes: 2

Views: 300

Answers (1)

Kawinesh S K
Kawinesh S K

Reputation: 3220

CSS

@media (min-width: 768px) {
.navbar-nav > li:first-child > a {

    border-left: 2px solid #fff;
    border-right: 1px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li:last-child > a {

    border-left: 1px solid #fff;
    border-right: 2px solid #fff;
    border-top: 2px solid #fff;
    border-bottom: 2px solid #fff;
}}

@media (min-width: 768px) {
.navbar-nav > li > a {
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
    border: 0px solid #fff;
    font-size: .8em;
}}

What you are trying is right but the element which you are applying :first-child and :last-child are wrong you should apply for li not for a Try the above CSS.

Upvotes: 2

Related Questions