CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Rupesh Nerkar
Rupesh Nerkar

Reputation: 391

how to change shape of background of active link in nav of twitter bootstrap?

I am using a Twitter Bootstrap at my web site and using Nav(Basic pills) as a navigation.

When I click on list menu or hover effect the default behaviour is to show background's shape is rectangle.

Now my problem is I want to change that shape into my own customize shape. Please suggest me the right way to do this.

Default shape is

enter image description here

and shape that I want is like

enter image description here

Upvotes: 2

Views: 2280

Answers (1)

joshb
joshb

Reputation: 5220

Here's some CSS that will give you a pill that looks like this:

enter image description here

.nav-pills > li.active > a {
   position: relative;
   border-radius: 0px !important;
}

.nav-pills > li.active > a::after {
   border-top: 15px inset transparent;
   border-bottom: 15px inset transparent;
   border-left: 20px solid #08C;
   position: absolute;
   content: "";
   top: 0;
   right: -20px;
}

You'll probably need to experiment with it a bit but that should give you the idea.

Upvotes: 4

Related Questions