While testing/experimenting on my website for responsive design (using the developer tools in my web browser), I noticed that at a viewport width of 481, the primary navigation menu completely disappears from the screen. If I change the viewport width to 480 or 482, it appears again. I wondered if maybe some of my customizations or plug-ins were causing an issue, so I went back to ground zero with a fresh, clean install of the Twenty-Twenty-One theme. However, the menu still disappears at a width of 481. Is there a way to fix this problem?
I noticed that at a viewport width of 481, the primary navigation menu completely disappears from the screen. If I change the viewport width to 480 or 482, it appears again.
Hi @kristenfisher427 I wasn’t able to replicate this issue, when the width is reduced to 481px the menu is displayed as shown below.
If you are seeing something different can you please share a link to your site and I will have a look.
Unfortunately, I’m not able to provide a link since I’m building this website locally on my computer using Local by Flywheel. However, while doing some more research on the issue, I stumbled across an old WordPress forum post that dealt with this exact issue (https://wordpress.org/support/topic/primary-menu-disappears-at-481px/). A support ticket was opened for it here: https://core.trac.wordpress.org/ticket/52354. There are many similarities to my situation – I, too am using Windows 10 Pro and the Chrome browser. As well, the screenshots the ticket creator provided exactly replicate my situation. Not sure if this helps?
Hi @kristenfisher427 thank you for providing more information, does the issue persist if your site is using a different theme OR if you try to access the site on a different operating system?
If that is the case I would suggest adding your experience to the trac issue you found for developers to take a look.
@thelmachido I don’t have access to a different operating system, but I tried activating another theme like you suggested, and the menu works fine at a viewport width of 481.
@domainsupport I use Version 113.0.5672.63 (Official Build) (64-bit). 🙂
Hi @thelmachido – I’ve added my experience to the ticket and included a link to this discussion as you suggested. 🙂 Thank you very much for your time – I really appreciate your assistance!
I am sorry I couldn’t provide more assistance but you can leave this thread open incase someone can assist further. Probably @domainsupport has more information about this since they know this issue.
Sorry, yes … OK so I’m on a Mac with Chrome Version 113.0.5672.126 (Official Build) (arm64) and I can’t make it do what you describe so perhaps this is an issue that only presents itself on Chrome for Windows?
@thelmachido No worries! I wasn’t sure how to handle the issue, so your guidance was very helpful. 🙂
@domainsupport Thanks for your response! So I tested on the theme preview as you suggested (with the same technical setup – Windows 10 Pro, same Chrome version) and I experienced no problem with the menu at the viewport width of 481. However, every time I do a fresh install of the Twenty-Twenty-One theme (so no plug-ins exist that will potentially cause problems), the menu still disappears. Would you have any suggestions?
OK, so I tried re-producing the issue by installing a fresh copy of Twenty Twenty-One and I’m afraid it doesn’t do it here. So someone with Windows 10 Pro needs to test to confirm your finding (I’m afraid I don’t have it!). Sorry.
No worries! Thank you very much for taking the time to try to help me solve this issue. I just want to confirm that you believe this issue is not reflective of a problem that exists on a device that truly has a viewport width of 481? As long as it’s just an issue within the simulation, and not what would happen with the actual launched site on a device with a width of 481, I don’t really care. I just want to make sure that the menu doesn’t disappear on a device that truly does have that viewport width. 🙂
I find it unlikely that a device would have a screen width of 481px so if this bug does exist in the CSS (and if it does it’s because the media queries are such that max-width is set to 480px and min-width is 481px) then it’s almost never going to present itself without you shrinking your browser window to that exact size. I don’t think it’s something to get too worried about.
Thank you very much for your response! I’m glad to hear you don’t think this will be an issue. 🙂 I found your comments about max-width and min-width in the CSS interesting and decided to explore the theme stylesheet. It turns out many of the menu related media queries were set to a max-width of 481px and min-width of 482px. I played around with those media queries by setting the min-width to 481px (rather than the 482px it was originally set to). After doing that, the menu displayed perfectly at a viewport width of 481 (it functions exactly like the Twenty-Twenty-One preview).
I understand CSS and media queries, but am by no means an expert. Do you know of any potential issues that might crop up by changing the min-width to 481px for the menu media queries? I’d obviously do this in a child theme. I haven’t noticed any problems, but thought I’d ask for your opinion since I’m sure you’re far more versed in this than I am. 🙂
