CODEWITHSUNDEEP
csstwitter-bootstrapglyphicons
doovers
doovers

Reputation: 8685

Show Glyphicon behind Navbar

I have a login form on my page that has 2 bootstrap glyphicons in the user and pass fields. The problem is that they show above my sticky navbar when they scroll passed.

I've tried setting the z-index to a lesser value than the navbar (ie navbar=1 icons=0) but that didn't work.

Why is this happening and how can I prevent this behaviour?

Upvotes: 2

Views: 963

Answers (2)

DogMatix
DogMatix

Reputation: 21

I solved this issue with Glyphicons passing over a Bootstrap navbar when scrolling by altering the position property in CSS.

.glyphicon {
    position: static;
}

Upvotes: 2

Cgramme
Cgramme

Reputation: 35

Reviving an old thread... I ran into this problem myself and thought I would share my solution.

I am using font awesome so I add a class of fa when I need to use a glyphicon. The class fa looks like this.

.fa{display:inline-block;
font:normal normal normal 14px/1 FontAwesome;
font-size:inherit;text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
transform:translate(0, 0);}

I just removed transform:translate(0, 0) from the class and it works perfectly. Font awesome and bootstrap are very similar when it comes to glyphicons so it should work in both cases... Hope this helps somebody.

Upvotes: 0

Related Questions