Currently I am struggling with a certain design I want to implement in my website. Through the onepager, I want to show I line on the left side of the content. The line exactly connects with the logo in the nav bar. Since some of the sections are a darker colour, The line needs to respond in colour the different sections too.
The problem I am struggling with mostly: how do I get the line to correctly stay at the right spot underneath the logo in responsive design.
I know for the change of colors in the sections I can add the mix-blend: difference right?
I think I’d go old-school on this, and just make the line a 1px black left border on the containers.
Something like;
DIV-section - left padding 4rem
DIV-container - left-border 1px black; left padding 5rem
You’d apply variations of that to the first 4 sections, and then in the 5th, you just have a variation with a bottom border and a bottom-left 2.5rem corner
For the hero image, you’d either need to make the image the background of a section subclass, or position and z-index so that the container is on top of the image.
The reason I’d probably use this approach is-
it’s easy, and designer friendly
You get segment specific color control
Easy to align, and to add responsive behaviors
That bottom corner wrap.
The logo would just need to be sized and positioned strictly, using the same units ( rems, px, etc ) you use for your line positioning
I tried to apply your suggestion, but it did not fully work out yet… I think I have set the exact same values (though the margins on the nav bar are 105px and not 100px to make the bottom of the “star” align with the line and the padding so that the logo would stick all the way to the edge of its div), but still when scaling the page they don’t align. (see imagery)
Let me know if you know you see where I did wrong. Thanks!
Yes the logo is the hard part. Because it’s not square, you will have to be very strict on sizing and positioning it.
The only advice I can give is to make sure you’re using the same units for the size of the logo as you’re using for the margin below. Make sure you’ve setup the containers the same, so that your nav margins & padding are not changing differently from your body.
The rest is eyeballing it to line up that line, and then making your responsive changes.
I have a hard time with what I should eyeball the location with. Is it the margins/padding of the logo itself? Is it the margins/padding of the div inside the containers? I am not sure…
In this situation I’d probably use relative-absolute positioning and offset it by some amount to get that alignment. The concept is simple but getting it to work inside of Webflow’s nav component may prove a real challenge. It has its own idea of structure.
