- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@media and mobile nav links active when menu is closed
I'm having issues with the nav links in @Media (max-width: 992px) or mobile sized viewport. Even though the nav menu is closed, the nav-links in the menu are still active, i.e. they can still be clicked on when browsing a page even though they are not visible. Any insight into targeting the li items in the navmobile-wrapper and giving them display: none or deactive state when menu is closed would be really appreciated.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
@TLK123 When your viewport is 992px or less in width, the media query should turn on the hamburger nav menu (usually by setting the display to block) and turn off the full (desktop) nav menu by setting display to none. If you continue to see the desktop navigation at or below the mobile breakpoint, it means that the media query doesn't include a display:none attribute on the desktop navigation wrapper.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report
- Subscribe to RSS Feed
- Mark Thread as New
- Mark Thread as Read
- Float this Thread for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
The mobilenav hamburger is visible, and the display: block works for the desktop nav as per the media query. The problem is that even when the 'hamburger' menu is closed, the links contained within that menu are still clickable even though they are not visible. It's as if they are hidden but not blocked by the main body container, or that the links are still listening for onClick even though isOpen === false.
Thank you for the reply, and any further insight is greatly appreciated.
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Permalink
- Report