responsive menu

[miodrag]

i have layout grid as header with dropdown menu inside.Ive set layout grid position to sticky because i want navigation to be visible all the time, but when i switch to 480px view mode on my browser or lower to check the layer is hiding when i scroll down.Any help appreciated

[crispy68]

If you want it fixed at the top then set the grid position to fixed header.

[miodrag]

thanks for your reply, but here's small demo project if you can see it and tell me what im missing? when i preview two elements are overlapping also
https://www.mediafire.com/folder/szzlke ... New+folder

[crispy68]

It's because when you set something to fixed, it removes it from the flow of the page, and any space that it would have taken up is removed which is why the grid below takes up the space. The solution is to simply add top margin to the grid below equal to the height of your header grid 78px.

However, sticky in your case should work also. The reason why it disappears is because you don't have enough content on the page. You have to understand what sticky does for it to make sense. It will only stick as long as there is content within the same <div> so to speak. In your case it is the height of the body but in your example the height of the body is less than the actual screen height. Once you reach the end of your page as is, there is no more content so it scrolls off the screen. One you add enough content to the page it will work.

[miodrag]

thanks again for your reply.In 480 px or lower i scrolled down with added content on page then it disapears,but once i scroll up the page it shows again.So i think thats it for smaller resolutions

[crispy68]

It's because you have a shape sitting at the bottom of the page. You need to remove this. Mixing responsive objects (grids) and fixed position objects (shape) on the same page does not work together. As long as you continue to add grids, flex containers, flex grid or floating layers to the page, the sticky header should work fine.

[miodrag]

this was precise answer thank you again