Fixed navbar and responsive video issue

Code Feedback
1

Hi Guys,

I’m working on the landing page project and having issues with navbar and video. Here is the link to my code: https://codesandbox.io/s/landing-page-fcc-jbb89

  1. I am trying to fix the navbar(id:header) at the top. Without the position:fixed, the items in navbar are centered when width goes below 600px and stays on left and right when width>600px.
    The moment I use position:fixed, the navbar items overlaps with content below it and the navbar items position themselves at top left with fixed positioning.
    Adding a margin is a solution to avoid overlapping but is there a better approach to deal with this? Also how do I center items at width<600px with position:fixed?

  2. I have added css to make the video element responsive but it goes way too big when width reaches more than 1000px wide. Any way to cap the width to let’s say 600px when browser window width>1000px without loosing the responsive behavior?

Thanks in advance guys,
Rahul

2

Hello,

  1. When you use position:fixed, the element is taken out of the flow of the page; it’s like oil floating on water. To fix the navigation positioning, you can set your header width to 100%.
    One way to deal with the overlapping content, which is now under the header, is to add a div that acts as a buffer of how ever many pixels high the header is.
    you can add a buffer div after the closing </header> tag. Example:
    <div class="buffer"></div>
    CSS: .buffer { height: 40px; }
    If you apply a height to the header, say 8rem, it is easier to set the buffer to the same size. You will need to adapt that in your media queries as well.

  2. For sizing, you can use vw (viewport width) and vh (viewport height) units. You can set your video-frame to say 50vw (100 is full width) and 60vh. It should look like this:

    image
    image1490×470 72 KB

    Of course, you can use media queries to change the size.

3

Thanks @leebut.
You made the solution sound so easy and obvious. :stuck_out_tongue:

4

You’re welcome. :slight_smile:
There may be other ways to deal with adding space so that content is below the header, such as a top margin.

5

Well I tried top-margin on the main content and it did worked but I was looking for more viable solution.

What if I want to add more content to the nav bar in the future? I’d have to make a change in the main content too in that case. I wanted to avoid that, that’s all.

6

Ahh, maybe position:sticky would be better than fixed, without the buffer div. I think that left:0 will not be necessary for the header.
Consider browser compatibility.