Streaming live at 10am (PST)

Super strange BG color behavior in a section


#1

So this is very strange. I have a page (still tweaking and practicing design) and on the top I have a section where my nav bar is. i want a color in it. I applied a BG color, but I don’t see it in desktop view. I see it in all the smaller views though. Even more odd (though clearly I am missing something) is if I throw a DIV block in the section, the BG color is suddenly visible! What am i missing here? Clearly I changed something because I did have it working at some point.

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=d202a5d2304a2953a6b996ab5030110e


#2

even crazier yet, is when I look at the preview here, the color is visible! I also noticed I had the container set to color too. I took that off and left the section, creating a new link.

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=f9e0845ee173f42a997270d8dc78be14

Ok, just tried this version and it is what I see.

How strange is it that the color was visible with the link I posted. but not on my site. Is this some sort of bug?


#3

Ok, now that is wacked. I made a “symbol” from that section to build another page the color is visible on that page, but sill not on the “home page”! So odd…


#4

Hi @IPT,

When you are using background color, it will be within the bounds of the element the style is applied to.

The reason you are not seeing it is because the wrapper has no height. You defined the height to be 100% but for a CSS height property to be defined as 100% it needs to know the parent height.


source: https://developer.mozilla.org/en-US/docs/Web/CSS/height

Depending on the result you want to achieve you can use another relative unit like VH. Try set it to 100VH and you will see your background color.

Also because absolute and fixed position make elements be out of the flow of the document (“Nav Menu” and “Brand” are set to absolute) all the parent elements are not evaluating their size to adjust their height and as a result they collapse to 0 height.

Therefore your container has no height, his parent, “home nav bar”, has no height, and so the section and so the “wrapper” which is set for “sandy” background colour.

Layout with CSS rules is not rocket science but there is a bit of a learning curve to it :crazy_face: .
My advice would be to take the time to really understand those rules. The couple of hours to go through the reading material below thoughtfully will save you hips of headaches.


Keep it up, Webflow didn’t invent those rules, they just made it easier and faster to implement with a powerful visual interface.

I hope you will get the grasp of it and this answer will help you in the process.

Max


#5

Hey Max, thanks for the input. I’ll read it more in depth after work. Odd, that it works on the other page considering it was made into a symbol (via the page not displaying) and should have all the exact same parameters. Maybe it’s something to do with a parents parent, I’ll have a look.

Thanks for the VH info. I thought putting “100%” was saying full 100% height and width. So the “VH” changes that and ensures it’s 100% of the viewer height vs just putting 100%?


#6

Thanks Max - got the top bar working. Oddly, now my drop downs are not visible in the desktop view! They’re fine in all other views, strange but I’m not exactly sure when they went away.

https://preview.webflow.com/preview/louiss-radical-project-d73ee4?utm_source=louiss-radical-project-d73ee4&preview=7f86d28180fdcd5e50f19ebed8f22542


#7

Strange, and now, without doing anything the menu drop downs are back. Just super weird.


#8

Can’t access your read only anymore to take a look.

Did you find out where the problem was?


#9

Nope, your comment about the lacking height resolved the issue with not being able to see that banner. As for the links, I just ignored it for a while and worked on some other pages. On the other pages it was all working properly. At some point in going back and forth all of a sudden the dropdowns were just working again. I can’t explain it, but it seems resolved for now.

Appreciate your help, thank you.