How can I place the Navbar inside the Section with 2 Div Blocks

Hello,
I am practicing layout by taking website I like as example and try to replicate it.
This is the website I am replicating : https://getlupii.com/
I encounter a problem though, I don’t know how to place a Navbar inside the Section.
I create a Section (cass name Wrapper) as Flexbox with 2 Div Blocks (class name column).
When I drag the Navbar it will only sit outside of the entire Section, but I want to have it to look like the original website. How can I do it? Maybe there is a better way to split the screen ?

Thanks a lot ~~


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Select the flexbox section, remove the -100 margin, pass it to height 100vh.
Select the navbar, make it width 100% and Display Fixed with z-index to 500.

So here you don’t need to have your navbar in the section, and it wouldn’t make sense. Rather, you tell it to display:fixed, so that it “hovers” above everything in the page, and by default sticks to the top of the viewport. And it won’t scroll with the rest of the site when you add sections, exactly like in your reference.

https://dl.dropboxusercontent.com/s%2F8jdpckddnl3dp7h%2Fkvxp2.mp4

Kudos for providing a read only link on your first post.

2 Likes

Amazingly helpful ~~ and so fast, thanks a lot :smiley: