Issue with the Twentytwentyone theme main navigation menu
-
Hi!
I found out that the Twentytwentyone theme primary navigation menu, can get stuck in a vertical list view under certain circumstances.
The issue seems to be affecting vanilla Twentytwentyone installations, and can even be replicated on the official theme preview from the following link:
https://www.ads-software.com/themes/twentytwentyone/
To replicate it, follow these steps:
1) Load the twentytwentyone theme preview, or a website based on the theme
2) Force responsive design mode on your web browser, or resize the browser window to the appropriate dimensions, so that the hamburger menu icon is displayed
3) Open the mobile menu by clicking on the hamburger icon
4) Leave the mobile menu collapsed and exit responsive design mode, or maximize your browser window.
5) The navigation bar links are now displayed vertically, even on desktop mode
Thankfully, refreshing the website will reset the navbar items to their original locations.
Using the following CSS, seems to fix the issue:
.primary-navigation-open .primary-navigation > .primary-menu-container { position: relative; }
Please, forgive me for any grammatical/syntax mistakes – English is not my native language. If you need further clarification, I’ ll be happy to help!
If there’s a better/less hack-y solution than the code I provided, please let me know. Thanks in advance!
- The topic ‘Issue with the Twentytwentyone theme main navigation menu’ is closed to new replies.