I’m looking to have a logo in the header that’s larger than the header, and overflows into the page’s splash image.
Here is my public share link: https://preview.webflow.com/preview/pizza-portfolio-site?preview=278621b85ffddbc046c65af20174b384
Make the z-index higher than the rest of the objects.
Something like this?
Also, your site is not responsive. It’s going to be tough making it responsive considering the size of the window. I’ve never seen a Webflow site structured like that.
Yes, that image is what I’m looking for.
What do you mean, the size of the window? I’m just using one of the containers that automatically fits to 960px. How should I structure my site instead? (This is my first webflow site, just trying to learn how to use it)
Hey,
Webflow is built to create responsive designs which shift content to load on all devices. The type of design you have is generally for the old style web where it was just a window in the middle of the browser. Issue with that is if someone visits your site on a phone, it will look awful. the 960 container is meant for content. Sections, which span the entire width are meant for big hero images, sections that content lives and anything else that fills the browser width. I suggest checking out the tutorial videos at http://help.webflow.com/courses especially this one for creating an entire site from start to finish. http://help.webflow.com/courses/full-website-tutorials
I strongly recommend watching a lot of those videos before settling on a site design because, just as i learned early on, the things you learn in the videos will drastically shape your site design. I also suggest starting with a template and messing around with it until it looks like what you’re thinking.
As always, I am available to help or for hire if you want more hands on help.
Good Luck!
Changing the Z index does nothing. How else could I fix this?
I’ll definitely check out the tutorials, but, I’m sorry, are you suggesting that websites HAVE TO fill up the whole width? Using a 960px layout is pretty standard, though as you mentioned it needs to be modified for other screens.
Order the content differently (meaning change the position). A lot of people use containers, but what alot of new designers have trouble with is the art of not emphasizing that you have a container.
Of course they don’t have to take up the entire width but specifically as a designer, my opinion is why wouldn’t you? Theres so much real estate to be used in the entire width with larger monitors why would you want to limit yourself to 960px? I personally am not really a fan of the dominos site and if they hired me, I’d definitely use the full width if they let me. But if you notice it is responsive and changes to full width as you change the width of the window. This is all just my opinion though, by all means, if thats what your client is into, go for it. If you look at the majority of the pages on https://onepagelove.com they are all full width with beautiful hero images. That’s the site I go to for inspiration from award winning designs.
But to answer your original question, What I did to get that effect in my screenshot was to put the logo back into the logo container in the navbar and give it a negative lower margin. That makes the navbar go back to it’s original height. Z index won’t help in this case. Let me know if that makes sense, if not, I’ll make you a video.
Good Luck!
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
