Fix position on Navbar in codepen

#1

Hi there,

I am new and I am not sure if I am using this forum correctly.

I do not know if the problem that I am struggling with is one that has been dealt with already, but for some reason when I am trying to apply a fix on the position on my navbar, the navbar seems to disappear.

Pleas can someone assist.

#2

I forgot to say that this problem I have with the codepen app

#3

Hi, welcome to the forum!

Can you post a link to your codepen?

#4

Hi Ben

Thank you for getting back so soon.

The link as follows:

#5

If you use position: fixed other content will flow under or over it. I would have expected that the content would flow under it, but Bootstrap’s .container-fluid seems to flow over it. Simply add z-index: 1 to the ul to fix it.

EDIT: Or it might be standard behaviour for a div to float over a ul.

#6

If you try to make a sticky navbar you should use: position:fixed; top: 0; width: 100%;
Of if you are using bootstrap, give your navbar this classes: navbar navbar-fixed-top. This will do the same thing and your navbar will follow your scroll :smiley:

#7

Thank you Ben and hossuraul!

I will experiment with both your suggestions.

#8

The z-index: 1 was an immediate fix to my problem, thank for explaining the problem.

#9