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?
Ah … tricky … by changing the value of
min-widthyou may inadvertently break other aspects of the media queries and menu system on your or other browsers. I believe that the reason the
min-widthare set to adjacent numbers rather than the same number is because the comparison used by CSS is “less than or equal” and “more than or equal” respectively. So, depending on the order in which the media queries are, will depend on which CSS is accepted seeing as when you change the
min-widthvalue to 481, both
max-widthmedia queries are true. Bearing in mind these CSS statements determine when and how the nav and other elements of the theme are shown, this could almost certainly have detrimental side effects.
I believe what is happening in your version of Chrome is that rather than returning an integer, a decimal value of the width (larger than 481 but less than 482) is being compared (for whatever reason) which is why neither condition is being met.
Anyway, it’s an old issue that is only located when a specific browser on a specific operating system is specifically forced to 481px wide for which there is already a ticket on trac. I really don’t think this is something to worry or bother about. I certainly wouldn’t make changes to the CSS which may make things worse for all browsers on all operating systems 🙂
Hi @domainsupport ,
Thank you so much for your detailed response and for explaining to me the potential pitfalls of altering the menu media queries. I was worried something like that might happen, so I appreciate your feedback and all the help you’ve provided over the last few days concerning this issue. 🙂
- You must be logged in to reply to this topic.