So we have a size applied and let's go ahead and copy this button and we'll paste it into this nav layout and we'll give this title at something like shop now and we want to select the layout and we want to space these elements apart.
So to do that we can apply Flexbox we can align them to the center and then on the x-axis we can space between and that'll put the logo on one side and the button on the other side.
Now we want this Nav to rest on top of our hero section and by default things should just stack under each other but if we want these elements to overlap we need to adjust the nav's position so with the nav selected we can head to position and there are a couple different types we can choose.
The first we'll select is absolute, absolute just causes this to overlap and we'll say absolute to the full top so it fills all of that available space.
Let's select this section and right click and duplicate so we can scroll a little bit so with absolute this nav isn't really taking up any space it's ripped from the document flow and it's just absolute on top anything else now with fixed it's also removed from document flow It's not taking any height but it stays with us while we scroll that's the difference between the two, and another option we have is sticky and with sticky it takes up its space within the document but it'll stay with us while we scroll so that's the difference between sticky and fixed is that fixed doesn't actually occupy that space there it overlaps the next element and for our case we're just going to set this to Absolute so it stays while we scroll.