Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 295251

Bartik - Responsive menu-toggle shows up in show mode after switching from mobile to pad or desktop display

$
0
0

Bartik theme has a responsible primary navigation built in with three display sizes for mobile, pad and desktop.
In mobile display either a "Show" or a "Hide" menu-toggle bar are being provided to show or hide the primary menu. These two bars are not needed in pad and desktop navigation display as the primary menu is always visible in those display sizes.

Bug
By resizing the browser window you can show the primary menu in mobile mode, then resize the browser for pad or desktop display size and have the menu-toggle hide bar still being displayed, because it is not properly hidden by CSS. On mobile and pads this can be a problem in those cases when portrait and landscape display would cross over mobile and pad/desktop navigation sizes.

Reproduction
I've used Firefox with built-in tool 'Responsive design view' to create screen shots using the mobile format 360x640px, but the bug hits anytime when the Bartik breakpoint of 461px is crossed by switching from portrait to landscape orientation or increasing the width of a browser window after the mobile menu has been opened.
You can reproduce the error easily on a freshly installed Drupal 8.1.x by the following steps:

  1. Step - Open firefox, turn on the 'Responsive design view' in the 'Tools=>Developer' menu, switch to 360x640px format (portrait) and open the freshly installed D8.1.x test site.
    Step 1
  2. Step - Click on the toggle-menu sign to open the menu (consisting only of the 'Home' link)
    Step 2
  3. Step - Click on the orientation button of the 'Responsive design view' tool to switch from portrait to landscape orientation
    • Without the patch installed, you still see the "Hide - Main navigation" bar, although Bartik should have hidden it now.
      Step 3 - without patch
    • With the patch installed, you will not see the "Hide - Main navigation" bar, as it is not needed in this display size of the responsive theme.
      Step 3 - with patch

Solution
Apply patch of first comment in this issue. Please make sure to clear the cache after applying the patch ('drush cr' or via UI).


Viewing all articles
Browse latest Browse all 295251

Trending Articles