What causing the overflow of navbar after deployment?
I have been cloning a homepage front of dentistry site , while developing the navabar works fine as responsive but later I deployed it on vercel and open it on mobile the navbar is overflown.
Deplyed link :- https://polyviou-dentistry.vercel.app
4 Replies
Hey,
When we decrease viewport width, your "desktop__nav_1" starts wrapping contents, and you have 2 rows instead of 1. At the same time nav applies align-items: center that causes moving your logo down. Basically, it hides under the "hero-ads" div which has z-index: 10.
I hope it helps.
It helped thanks, but I am really curious why it isn't showing while developing and only after deployed.
Viewing in responsive mode can only get you so far. It can give you an idea of how the design will work with those screen dimensions but can not truly emulate how your design will behave on the device , on its oS and on the browser engine the user has chosen.
That’s why we have to test on as many devices with as many browsers as we can get our hands on- responsive mode and the “device” options can only give you an idea of the screen dimensions and aspect ratio.
It's a bit hard to say what exactly a reason as build and production bundles might have quite a few differences. For example, compression. In your case, this should not be a problem though.
Remember, something similar happened to me a few years ago. The problem was in caching. I fixed it using Chrome in the incognito mode and hard reloading.