Hi @jessstanley7, OK… hopefully I didn’t miss any of the steps that worked for me. Here’s this tangle of words:
Centering Logo in Mobile View
While in the mobile breakpoint view:
Under NavBar, go to Content Wrapper. Set Display to Flex – Vertical with Align set to Center.
Under the Brand Link, move the logo image outside of the Container 2 and delete the container (it’s not necessary here). Your logo should appear centered. Of course now the other menu items will have dropped vertically.
On the Nav Menu Div, adjust the top margin to move the menu items back into place. I used -25?
Select your Navlink style and make the right margin 0. After that, the logo and your nav items will be centered.
Looks like you’ll want to add a little top margin to the Brand Link so your logo has some breathing room?
——
Blobs
I’m not sure if this is the best approach but this seems to work:
Remove all animated figures from their sections so they’re on their own. Set a z-index of 3 or 4 to each… except the green blob needs to have a z-index higher than the first content section (the one with a subclass of iPhone). You can change overflow to hidden at this point and they still seem to work. EDIT: Green blob… IF you don’t want it scrolling on top of the iPhone section, then make the z-index lower… I was assuming you wanted the blobs to float on top of all content except text. Derp.
Green Blob:
After the green blob, set a z-index for the Hero Section that’s higher than the green blob. Like 6 or 7.
Purple Blob:
Set the z-index of any sections it overlaps to be 5 or 6 (or higher than the purple blob z-index)
Orange Blob:
Same kinda thing… except in this case, the Quote Box section is static. In that case, select the Top Margin div and give it a z-index of 5 or 6, or something higher than the orange blob z-index
Long story longer, this seemed to work on my end:
Green blob — z-index = 5
Hero Section — z-index = 6
1st Content Section — z-index = 4
Purple blob — z-index = 3
Content sections on either side — z-index = 4
Orange blob — z-index = 3
Top Margin div — z-index = 4
You can give them any values in that hierarchy that make sense to you.
I’m sure there are many ways to skin a webflow site, so I don’t profess that this is gospel. But hey, if it works… right?