How can I compress the space underneath the element in the first column and first row
Hi everyone!
I'm trying to recreate a small demo of a functionality where there's a navigational tab menu and each below that and also a small card that should be sticky while scrolling down.
I have two problems that I'm struggling to solve:
1. Is there a way to remove the excess space below the first element (the one where I draw a red line). I think it's taking an extra space below cause of the sticky card to equal it in height (grid sizing algorithm I guess)
2. When I scroll I want the sticky card to not be stacked on top of the navbar, but rather I want them to be sticky but not overlay one another.
Here I'll leave a codepen I made: https://codepen.io/fracav99/pen/QWejpqE?editors=1100
Sorry but english is not my primary language, so if something's not clear, don't hesitate to ask. Thanks in advance for your time! 🙂
2 Replies
As you say, the height is being casued by the content in the second column.
In my opinion the simplest solution here would be to place the left-hand column "sections" in their own wrapper which would place them all in the first column.
As for the sticky card, if you don't want it to "stick" on top of the nav, you will need to modify it's top position to take into account the height of the nav. The issue here is that your nav height isn't defined so either you can use a magic number (3.3em seems to work well) or you may need to define the height of the nav and use that fixed value to calculate the top position.
Ah, you may also need to add
align-self: start; to the sticky card as otherwise it will stretch to the full height of the left-hand column.Hi @Chris, thanks for your help! 🙂
I'll try and let you know