Navbar logo disappears on preview

Hi all,

I’m putting together a design for a very basic one-page site and so far it all looks ok in the designer view, but when I preview it, the .jpg I’ve put in the fixed navbar (where the branding will go) just disappears for all views.

Can anyone tell me what I’ve done wrong?

Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/iconias-first-project?utm_medium=preview_link&utm_source=designer&utm_content=iconias-first-project&preview=bf8b385e4349fa99b158879ec9be6a43&mode=preview

In order to be shown by the browser, elements need to have dimensions. Either dimension that are driven by the content (like an image inside of a div makes the div the size of the image) or by set dimension (width and height).

Your brand element only has width, the height is auto. And it has no content, because the background image is just a decoration and doesn’t count for dimensions.

So your logo is here, but it’ zero pixel height, so you don’t see it.

Prefer using an actual image inside of the brand element. Not a background. Because of this issue and also because your logo is an important piece of content, not a decoration.

Decorations : ok to use background-image
Images that are important to content: they must stay as images, not bg images

3 Likes

Great explanation! Thanks a lot. I’m so new to this that I hadn’t even thought of making that distinction.