Moving content below nav-bar

HTML-CSS
1

My page

Ok, I’ve given up trying now so I’ll ask you guys. :smiley:

I’ve lowered the opacity on the Navbar so you can see the issue; I want the main page to be lower than the nav when the page width is <900px. Right now the nav is blocking content.

I’ve tried using different selectors and ‘margin-top’ but this causes all the elements to inherit it. I want to select the main as a whole and move it under the nav.

I always struggle with selectors (always have W3 chart when I work). I’m assuming if this was a single element I could easily move it, the issue I see is multiple selectors.

I even tried wrapping it all in a div and using something like div > *, or div * for example.

Cheers

2 
* { 
font-family: 'DM Mono', monospace;
margin: 0;
}

You have the margin set to 0. Try setting the margin-top differently.

1 Like
3

You should target your main wrapping div in your CSS, media query part and give that main div a margin-top.

i.e. You can give a class to your wrapping div like class="wrappingDiv" and then in media query you can add
.wrappingDiv { margin-top: 30vh; }

1 Like
4

I want the nav to stay put, it’s the main content I want to sit under the nav (at under 900px)

5

beautiful! Why couldn’t I figure this out! I thought I had tried that. Thank you.

I’m still learning about vh’s vw’s em’s rem’s so right now I’m sticking to % and pixels. Is this an issue? i.e will it cause the main page to line up differently on other screens even though 200px may be suitable on my screen? (all looks fine with the ‘inspect panel’)

6

You can try different resolutions in dev tools and experiment like giving px or vh/vw so to see whats different. I am not using rem and em too often also. Just in font sizes. =) Probably for some elements it is better to use vh and vw but you can implement them by time I guess.

1 Like
7

Ok thank you for the help=)

1 Like