My Div overlaps on the Navigation bar

Hello Webflowers,

I have an issue with a div I want to place on my hero section.

My hero banner consists of my hero section (relative but with no values) that also has Background image set, and a fixed navigation bar. now when I try to insert a div in the section, instead of going underneath the navigation bar, it goes and takes its place on where the navigation bar already is.

This behavior is not consistent the block display setting selected.

Here is the link: https://preview.webflow.com/preview/gravidoo?preview=94f408606d7e9c97d294bc65c11681d6

Also to note that I have one interaction created for the navigation bar when scrolled.

Does anybody know why this happens?

Also another question I have (maybe silly) does anybody know if I have my section set at 100vh height if my divs with text elements inside will be responsive in a 28 inch screen and say an 18 inch screen, or will the text remain the same size in both screens, meaning that may be on the 18inch it could look normal but on the 28 inch screen it would look small?

Appreciate your help in advance and I hope I hear from somebody soon.

Generally, the platform is just unbelievable and the future of how a lot of designers will work from now on I feel.

I find it lifesaving when it comes to saving time, money and having greater results due to Webflow’s out of the box interactions than having to work with semi-professional that requires a lot of resources to have your designs build and work exactly how you envisioned them to work.

The learning curve though especially in the beginning is kinda stip
!


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

Ooh and this is the link to the first version of the website i was working, but it’s incomplete, i stopped working on it because i realized that if i don’t know what i am doing, the site won’t look good or be responsive and will have flows.

link:https://preview.webflow.com/preview/sotirioss-first-project?preview=fec9941cbe08c927cfd1faa6bcc88884

Basically, my biggest concern is the responsiveness of the website but not when it comes to smaller screen sizes (webflow allows you to rebuilt the site for smaller screens) but when it comes to the bigger ones, it’s hard for me to get the grasp of how a container that is 960px wide shows on a 28inch screen you know what i mean? will the container look exactly the same and the elements in it on a big screen, or everything will just be centered and small with huge gaps on the sides?

Or if there is no container but a simple Div (with text in it) instead that has only margins for placement in a section, will this div be responsive on bigger screens?

Hi @Pure_Street

Welcome to the community!
Why not drop onto the introductions section if you’re staying for a while? :grin:
https://discourse.webflow.com/c/community/introductions

Here’s a video which will hopefully help
 any questions just fire away.
CloudApp

1 Like

You don’t have to design in a pre-built container that is 960px. On my Mac it looks tiny. YOu can either use the whole screen at 100% to design, and use the breakpoints.

Or you can make your own container class, and make it 1500px maximum, (or whatever you like) to minimise the blank space on larger screens.

Learn flexbox if you can, it will make it so much easier than using columns I promise.

Hi Markos,

Thank you for taking the time to assist me with this by creating a video (no sound).

Although I understand that by having the padding changed in the Heros section, in this case, does the job, the issue is that i still don’t understand why this issue takes place at the first place since every element that we put in the section with default settings should be going underneath the previous one?

Also for the second question, if I was to design on a 1500px width, wouldn’t the people that will see the website in a 960px wide screen miss information from their screen?

Apologies for my noobish questions, i am really new here.

Flexbox challenge accepted!

Thank you so much.

1 Like

Ah
 note to self
 turn the microphone setting on.

This video (with sound :grimacing:) explains why.

CloudApp

On the 1500px max container, you can change that on the tablet view to be 960px max, and so on.

1 Like

Eyharesto para poly (thank you so much/just in case!) :smiley:

There is a lot of practice for me to do on the designer.

Your flexbox suggestion looks like the best thing since sliced bread so I am going to focus on creating layouts using this method from now on.

It’s really helpful that Webflow lets you change the work as you go down in size without affecting the upper level.

I guess we are in the ‘magic’ era :smiley:

Thanks!

ΣΔ παραÎșαλω :wink: I lived in Greece for a while and speak and write fluently-ish :joy:

Flexbox really is powerful stuff, so a worthy investment of your time.

Drop into the introductions sections if you haven’t already, it’s a good way to get to know the community and help is always at hand when you need it.

https://discourse.webflow.com/c/community/introductions

1 Like

This is fun too: https://www.flexboxgame.com/

But can you solve the final level
 :wink:

2 Likes

Haha, it’s actually amazing to me that you speak Greek as a British person, I always thought that Greek is a hard language to learn, probably due to the fact that not a lot of people in the world speak it to start with.

I lived in the UK for a while believe it or not, and I had the time of my life there, I absolutely loved it.
Now I am based in Bangalore, India, let’s see how that goes :smiley:

I will definitely introduce my self to the community and i will see you soon, thanks again Markos!

1 Like

Hi Stum,

Thank you for the link.

I actually tried that before and got stuck on number 17 which is really not close to the end at all!! I need to raise my game I think!

Thanks again :smiley: