Nav menu on mobile is janky

Mike,

I can’t thank you enough for how helpful you’ve been.

It looks like the issue is with the Scroll into View interaction, as your website is showing these elements as having an opacity of 0:

I can’t say for sure why it’s not working as expected, but I’d try moving that interaction to the parent container instead of individually on each box to see if that fixes the problem. Given each of them are at the same place on the page, these animations would trigger at the same time anyway, so there’s no reason to manage the same thing across three elements anyway.

So I should change opacity to 100 then.

The opacity is controlled within the interaction, however for some reason it’s not triggering on page load. Just try moving the three individual interactions to the parent element that I have highlighted in my last screenshot (.top-border) and republish to see if the effect is working.

Yes it worked! You’re definitely amazing at what you do sir.

Under Our Services, how do i make it so that the picture doesn’t expand beyond the border upon hover?

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview

Just add overflow: hidden to the parent container of the image that’s growing on hover. Currently it’s a div block without a class applied so create a class and apply the same class to all of the columns.

Thanks!

Is there a way to hide the sticky side menu on mobile?

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5f9c21beb132a94fc1a7e853&mode=preview

For sure, just like with any other element you can hide it on a given breakpoint by changing it to display: none:

image

If you haven’t already, I’d strongly recommend going through the Webflow University content—especially the Ultimate Web Design Course—as it covers a lot of these principles.

I haven’t checked out the UWDC…I will today.

Mike,

Why is the body not centered once it gets to a larger breakpoint? Is the only way to center is to add margin on the left?

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5f9b35719101607924733c1d&mode=preview

You’ll need to click the “Center element horizontally” icon (or add “Auto” to the left and right margin) to get any element not extending 100% of the width to align to the center:

image

There are other ways to go about this, but this solution is the most common and easiest to implement based on your current setup.

Good trick to know. Thanks.

I can’t figure out how to get it so that when you click on the doctor’s name on the left sticky menu, the div section isn’t covered by the sticky nav bar. Does that make sense?

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&pageId=5fb8626986ad1b83280d10e1&mode=preview

There are lots of ways to offset the anchor tag link, but I’d recommend just giving your .drs div block (the ones that have the anchor link id applied to them) a top padding of 60px (which is the height of your nav):

image

Just make sure you modify this padding amount if the nav bar changes height on any given breakpoint and the anchor link will sit flush with the top of the image within that section :+1:

ohhh…i was setting the margin to 60.

Yeah, the margin is the space outside of the element—so changing that doesn’t affect where the anchor link stops, just where the anchor link itself sits on the page.

You can achieve a similar affect by including a separate “spacer” div element (which can either act as the actual anchor itself, or just create space within the anchor element) however I always recommend using fewer elements on the page if you can help it :+1:

https://preview.webflow.com/preview/cournotlee?utm_medium=preview_link&utm_source=designer&utm_content=cournotlee&preview=a53a2e721d5841b091d09b3674d2c72d&mode=preview

I can’t for the life of me figure out why the hamburger menu has a scroll bar when I try to edit the drop down menu.

The overflow on the .nav-container element is set to “Auto”—changing this to “Visible” should show it as expected when editing the menu in the Designer:

image

Thank you so much for always solving my issues so promptly. I truly appreciate it.