3D Nav bar CSS

I want my nav bar to stay fixed on the screen when scrolling but “position; sticky;” isn’t working, can anyone see what I’m doing wrong? If i change the position of the li.menu_list.front selector the boxes stack on top of each other.

ul.menu { display: inline-block; list-style-type: none; } li.menu_list { height: 50px; width: 110px; position: sticky; } li.menu_list .front, a.side { display: flex; align-items: center; justify-content: center; height: 50px; width: 110px; position: absolute; top: 0; left: 0; text-decoration: none; text-transform: uppercase; transition: all .5s ease-out; cursor: pointer; } li.menu_list .front { background-color: #34465d; color: #6e7dd3; transform-origin: 0 0; } a.side { background-color: #6e7dd3; color: #34465d; transform-origin: 0 0 85px; transform: rotateY(-90deg); } li.menu_list:hover a.side { transform: rotateY(0deg); } li.menu_list:hover .front { transform: rotateY(90deg); }

[/codebyte]

You could try position: fixed; instead. Some of the position options change how the elements interact with each other. You may need to add an extra margin to the top of the next element after the nav bar that is equal to the height of the nav bar. Or you may need to give your nav bar a z-index if scrolling items go right over the top of it.

If you put your HTML and CSS into a codepen, it will be easier to give you more specific advice.

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.