Streaming live at 10am (PST)

Mobile Nav breaks Desktop Nav


#1

I’ve run into an odd behavior regarding the top navigation. When I resize my browser to Mobile and click the hamburger menu, it pops out the submenu. When I close the submenu and resize my browser to Desktop, the logo get’s shifted over to the left side.

Even more strange, the Desktop 10ST logo is deleted while the Mobile 10ST logo takes its place. Your help is appreciated.

How to Replicate this Problem
What I do is I shorten the browser window horizontally, open and close the mobile dropdown navigation, and expand the browser window. I’ve tested this in Chrome and Firefox.


Here is my site Read-Only: http://tenth-street-blog.webflow.io/


#3

Hi @Captainmoo

Thanks for posting, this definitely looks like odd behavior. It looks like the browser is failing to rerender the navmenu correctly once it switches media query sizes. Once you refresh it looks like the browser fixes itself.

One thing to note about this specific behavior is that it’s incredibly rare that a user would encounter it – these sort of tests are typically only performed by us web professionals, and not the end user.

That said, you may be able to workaround this using some custom styles, but I think you’d need to adjust your design a bit — one potential solution could be to keep your logo on the top across all breakpoints.