Home Ask Login Register

Developers Planet

Your answer is one click away!

shadowz February 2016

How would I keep a fixed nav on top at all times in HTML/CSS?

Well I am working on creating my own personal website, it is a one page scrollable website with a fixed navigation at the top. I added a JQuery light box gallery from code I found online, it works fine, the only problem is when I am scrolling past the gallery, the tiles scroll up over my fixed navigation. Is there a way I can make it so my nav is always on top? Or do I have to edit the actual gallery plugin itself.


Joe Clay February 2016

The z-index CSS property controls how elements overlap with each other. If you set your navbar's z-index to a higher value than that of the gallery, it will appear on top.

Qaddura February 2016

In your situations their might be either of the two reasons to cause that:

1) Naturally, galleries should always be on top (it is the point of interest). So its CSS z-index might be set to a high value that tops on yournav

Solution : check the parent class of the gallery and see its z-index then give a higher z-index to your nav

2) Second case is rare to happen but it might still happen, so far it is clear that your nav has position:fixed. But the Gallery might not have set the position implicitly, so it is by default static which might cause this mysterious behaviour of layering

Solution : check the parent element of the gallery and add give a position property implicitly (AFTER CHECKING IF IT DOES NOT REALLY HAVE IT)

Post Status

Asked in February 2016
Viewed 1,785 times
Voted 6
Answered 2 times


Leave an answer

Quote of the day: live life