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.
Thank you so much for your response!
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?
Thank you again for your assistance!
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.
@kristenfisher427 I ask because I remember the old forum thread you mentioned 🙂
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?
Can you reproduce the issue when previewing the theme on the theme page and collapsing the sidebar with the button bottom left? https://en-gb.wordpress.org/themes/twentytwentyone/
@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.
Hi @domainsupport ,
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-widthis set to 480px and
min-widthis 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.
Hi @domainsupport ,
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. 🙂
Thank you so much for your time!
- You must be logged in to reply to this topic.