Testing before merge to core

[colemanw]

Once all other issues are resolved for this extension, the plan is to merge it into core.
See https://lab.civicrm.org/dev/core/issues/487

User Testing Needed

Please test what you can and leave a comment below to say what worked and what didn't.

• Wordpress
  • General
    • Keyboard interaction works as expected.
    • Quicksearch works as expected.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned.
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Wordpress Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Wordpress Menu
    • Shows up correctly and allows interaction with CMS menu.
    • Menubar adjusts when collapsing/expanding WP sidebar (including auto-adjust).
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Above Content Area
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Collapses to hamburger menu.
• Joomla!
  • General
    • Keyboard interaction works as expected.
    • Quicksearch works as expected.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned.
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Joomla Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Joomla Menu
    • Shows up correctly and allows interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Above Content Area
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Collapses to hamburger menu.
• Drupal 7
  • General
    • Keyboard interaction works as expected.
    • Quicksearch works as expected.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned.
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Drupal Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Drupal Menu
    • Shows up correctly and allows interaction with CMS menu.
    • Menubar adjusts when collapsing/expanding shortcuts bar.
    • Hide/show works as expected.
  • Position: Above Content Area
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Collapses to hamburger menu.
• Drupal 8
  • General
    • Keyboard interaction works as expected.
    • Quicksearch works as expected.
    • Adjusts with the various breakpoints in the Drupal admin theme.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned.
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Drupal Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Drupal Menu
    • Shows up correctly and allows interaction with CMS menu.
    • Menubar behaves well when switching between top-level Drupal menu items.
    • Hide/show works as expected.
  • Position: Above Content Area
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Collapses to hamburger menu.
• Backdrop
  • General
    • Keyboard interaction works as expected.
    • Quicksearch works as expected.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned.
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Backdrop Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Backdrop Menu
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Menu scrolls with page like the CMS menu.
  • Position: Above Content Area
    • Shows up correctly and does not obscure content.
    • Collapses to hamburger menu.

[vingle]

@aydun are there any specs on exactly what "Keyboard interaction works as expected" means? What key should engage the menu to start? And then should it be tab/shift-tab between top levels, enter to open sub menu and arrows to move between sub items? And enter to load? Or something else?

[vingle]

Joomla testing:

• General
  • Keyboard interaction works as expected. Possibly — tabs, arrows and enter works. Not clear how to engage the menu initially thru the keyboard, as using the tab key to trigger skip links and menu interaction doesn't work.
  • Collapse to mobile on small screens - hamburger-civi button is well positioned.
  • Mobile menu behaves well and scrolls when too long for the viewport.
  • Menubar works on touch devices.
  • Mobile menu works on touch devices.
• Position: Over CMS Menu
  • Shows up correctly and prevents interaction with CMS menu.
  • Hide/show works as expected.
• Position: Below CMS Menu
  • Shows up correctly and allows interaction with CMS menu.
  • Hide/show works as expected. No. Hide leaves a gap (is hide necessary as it isn't obscuring content or menu?).
    
• Position: Above Content Area
  • Shows up correctly and does not obscure content.
  • Hide/show works as expected. Yes (tho again not sure if hide/show is needed as nothing is obscured)

[colemanw]

Thanks @vingle - I've fixed the gap issue in e21e013

[aydun]

@aydun are there any specs on exactly what "Keyboard interaction works as expected" means? What key should engage the menu to start? And then should it be tab/shift-tab between top levels, enter to open sub menu and arrows to move between sub items? And enter to load? Or something else?

Yes - there is a checklist on https://lab.civicrm.org/dev/accessibility/issues/1

[vingle]

Thanks, will retest @colemanw.
Thanks @aydun — do you know how the menu is meant to be focused initially? For e.g. on a gitlab page clicking tab opens a skip-to-content-link, and then I can tab past that until the menu is selected. I get the same behavior in non-Civi Joomla admin pages too. But nothing like this happens in Joomla Civi - not sure if that's a CMS-specific or CRM-wide issue.

[aydun]

@vingle - not sure, but on the early versions of this I found that I needed to hit tab a lot of times to get past things that weren't visible until the focus became visible.

[vingle]

@vingle - not sure, but on the early versions of this I found that I needed to hit tab a lot of times to get past things that weren't visible until the focus became visible.

@aydun Ah that makes sense. this menu obscures the CMS menu which still needs to be tabbed thru in a hidden state, then it maybe needs to move the skip link otherwise this isn't really keyboard-accessible? Maybe that should be opened as a separate issue.

[aydun]

@vingle Yes, makes sense to do that as a separate issue since it may not be a simple fix. Maybe it needs a 'skip to civi menu' as well as 'skip to content'

[colemanw]

When the menubar is positioned over the CMS menu, the latter should be completely hidden and not tabbable. If that's not the case let's open a new issue.

[christianwach]

@colemanw Reporting a couple of issues with WordPress here:

Responsiveness bug

When the menu is set to "Replace WordPress Menu" or "Below WordPress Menu" then it obscures the WordPress Menu on smaller screens:

Works as expected when set to "Above content area"

Toggle button background

In order for Admin Colour Schemes to show through, it would be useful if the toggle had no background in WordPress:

#civicrm-menu-nav .crm-menubar-toggle-btn
{
	background: transparent;
}

Keyboard navigation

Because of it's position in the DOM, the KAM menu is the last thing get keyboard focus (Shift-Tab is a neat shortcut BTW, but it's to the end of the KAM menu) so I think there may be a need for a "Skip to CiviCRM Menu" link higher in the markup. Something like:

<a href="#civicrm-menu-nav" class="screen-reader-shortcut">Skip to CiviCRM menu</a>

In order to conform to the expectations of WordPress users, this should probably be inserted before #adminmenuback in the DOM so that the normal sequence is appended to: i.e. tabbing reveals "Skip to main content", "Skip to toolbar" and then "Skip to CiviCRM menu" in that order.

Looks good to me on the other tests I've done. Nice work!

[colemanw]

@christianwach hey thanks again for the testing. I wasn't able to replicate the responsiveness issue - see the screencast I just added to the readme. Can you check your css and see what's up?

[christianwach]

Can you check your css and see what's up?

@colemanw My bad - it was some pesky interfering CSS from elsewhere.

[colemanw]

@christianwach thanks. I'd like to tick the WP boxes above based on your testing - can I tick off them all or are there any you haven't checked?

[themak1985]

User Testing Needed

• Drupal 7
  • General
    • Keyboard interaction works as expected. (Not sure how to test this)
    • Quicksearch works as expected.
    • Collapse to mobile on small screens - hamburger-civi button is well positioned. (Only when using default admin menu
    • Mobile menu behaves well and scrolls when too long for the viewport.
    • Menubar works on touch devices.
    • Mobile menu works on touch devices.
  • Position: Over Drupal Menu
    • Shows up correctly and prevents interaction with CMS menu.
    • Hide/show works as expected.
    • Menu does not overlap page content even when wrapped to 2 rows.
  • Position: Below Drupal Menu
    • Shows up correctly and allows interaction with CMS menu.
    • Menubar adjusts when collapsing/expanding shortcuts bar.
    • Hide/show works as expected.
  • Position: Above Content Area (Not sure what this means)
    • Menu does not overlap page content even when wrapped to 2 rows.
    • Collapses to hamburger menu.

With Shoreditch enabled - there are a bunch of design issues - specifically related to the menu. Not sure if there will be a shoreditch fix to resolve this or if the shoreditch menu will be replaced by this menu. Also - for those Drupal users that use an alternative admin toolbar - like adminimal_admin_menu - the mobile toolbars placement is different and not well placed.

[themak1985]

Wordpress

• General
  • Keyboard interaction works as expected. (not sure how to test)
  • Quicksearch works as expected.
  • Collapse to mobile on small screens - hamburger-civi button is well positioned. Yes - but would be nice to have it adopt the same color of menu.
  • Mobile menu behaves well and scrolls when too long for the viewport. (Search looks weird)
  • Menubar works on touch devices. (search is weird)
  • Mobile menu works on touch devices.
• Position: Over Wordpress Menu
  • Shows up correctly and prevents interaction with CMS menu.
  • Hide/show works as expected.
  • Menu does not overlap page content even when wrapped to 2 rows. EDIT: Page content is fine - but it does overlap the first item on the left admin side bar - (Dashboard)
• Position: Below Wordpress Menu
  • Shows up correctly and allows interaction with CMS menu. (Conflicts with Dashboard submenu (left admin toolbar) items. Also conflicts with drop down menus on admin toolbar) EDIT: Works with WP5.0 - maybe it was a weird Caching issue)
  • Menubar adjusts when collapsing/expanding WP sidebar (including auto-adjust).
  • Menu does not overlap page content even when wrapped to 2 rows.
• Position: Above Content Area (Not sure what this means)
  • Menu does not overlap page content even when wrapped to 2 rows.
  • Collapses to hamburger menu.

[themak1985]

CMS agnostic - can we change the over-writable text in search field to adopt menu font?

[themak1985]

Toggle button background

In order for Admin Colour Schemes to show through, it would be useful if the toggle had no background in WordPress:

@christianwach Somehow this was fixed when I upgraded to WP5.0 - a bunch of other issues were fixed too. Odd.

[colemanw]

@themak1985 thanks for the testing. I've updated the master list. FYI to test the "Above content area" visit Administer -> Customize Data & Screens -> Display Preferences and scroll to the bottom to see the new setting.
Also @themak1985 does this help with the adminimal situation? #24

[themak1985]

@colemanw on wordpress - i should note that when there is two rows of menus - it does not overlap with page content - but it does block the first item on the Wordpress left toolbar. I don't think this is an easy fix - and I think its fine personally.

Also - personal note - Above Content Area menus are weird - but they work. :)

Hamburger menu in wordpress works but has a small formatting issue at top

[colemanw]

@themak1985 it's not meant to block anything in the left toolbar - did you see the screencast I put in the readme? Also I haven't noticed that formatting issue (also see that same screencast).

[themak1985]

Example of second row covering left side bar when covering Wordpress menu.

Example of hamburger menu formatting issue. Happens on narrow screens like phones.

What its like when its wider. Looks fine.

Is it just me or does the screencast in the readme not show two rows with menu covering WP top admin menu.

[andrewpthompson]

A quick test on Joomla 3.9.1, Civi 5.8.0, KAM from github master, and Firefox. Mostly working quite well (great work @aydun and @colemanw). Just saw two minor issues:

1. Most of the time when after clicking on Administer > Administration Console:

• the icon in the quick search box is missing
• the remainder of the menu slides horizontally to the left during page load which is a bit distracting (as the search box contracts I think, due to the "Quick Search" text)
• White space immediately below the CiviCRM KAM menu. Note this white space is not present on most other pages.
  
  Another page that does the same thing as the above is Campaigns > New Survey.
  Press F5 to refresh and the page will be correct.

2. When navigating from one page to another the new CiviCRM menu displays later than the Joomla menu. This causes the Joomla menu to flash briefly and also the page jumps down slightly when the KAM appears due to the Joomla menu being 30px high and the KAM is 41px. This is seen when navigating to any CiviCRM page.
   

[christianwach]

@themak1985 Do you have CiviCRM Admin Utilities active? And if so, have you updated to version 0.6? There's a much lighter touch in 0.6 with respect to KAM.

Edit: to clarify, CAU only enables compatibility with the WordPress user's Admin Colour Scheme setting.

[christianwach]

the page jumps down slightly when the KAM appears due to the Joomla menu being 30px high and the KAM is 41px

@colemanw It would be nice if KAM could match the height of the WordPress admin menu too: i.e. 32px when > 768px viewport.

[christianwach]

WordPress

@colemanw testing and feedback as requested - my comments in italic:

General

• Keyboard interaction works as expected.
  I left a comment above about how I think keyboard interaction ought to occur - by adding a screen-reader-friendly shortcut. I'm not comfortable with applying visibility: hidden to the WordPress admin menu as it goes against user expectations. See screenshots below for additional details.
• Quicksearch works as expected.
• Collapse to mobile on small screens - hamburger-civi button is well positioned.
  Passes except for my comment about making the toggle button background transparent.
• Mobile menu behaves well and scrolls when too long for the viewport.
• Menubar works on touch devices.
• Mobile menu works on touch devices.

Position: Over Wordpress Menu

• Shows up correctly and prevents interaction with CMS menu.
  Shows up correctly except for my comments about matching the height of the WordPress admin menu. And yes, it prevents interaction, but I don't think this is what should happen - it should augment interaction as per my observations on keyboard interaction.
• Hide/show works as expected.
• Menu does not overlap page content even when wrapped to 2 rows.

Position: Below Wordpress Menu

• Shows up correctly and allows interaction with CMS menu.
• Menubar adjusts when collapsing/expanding WP sidebar (including auto-adjust).
• Menu does not overlap page content even when wrapped to 2 rows.

Position: Above Content Area

• Menu does not overlap page content even when wrapped to 2 rows.
• Collapses to hamburger menu.

---

Keyboard interaction screenshots

Load a CiviCRM page, hit the Tab key. You'll currently see:

What you should see is:

Hit Tab again and you should see:

What I'd like to see (on hitting Tab once more) is this:

Details of how to enable this in my comment above.

The stacking problem is because the WordPress admin bar has z-index: 99999 and the .screen-reader-shortcut:focus declaration sets z-index: 100000 - so my recommendation would be to alter .screen-reader-shortcut:focus to z-index: 100001 or higher and leave body.crm-menubar-over-cms-menu #civicrm-menu as is.

[themak1985]

@themak1985 Do you have CiviCRM Admin Utilities active? And if so, have you updated to version 0.6? There's a much lighter touch in 0.6 with respect to KAM.

Edit: to clarify, CAU only enables compatibility with the WordPress user's Admin Colour Scheme setting.

Yes - but my formatting issues persist - even with CiviCRM Admin Utilities disabled or the options disabled.

[themak1985]

@christianwach @colemanw - In WP, I also get the same mostly hidden skip box that you get when I push tab. Of course I don't see it at all when I have the menu run to two rows. To engage the CiviCRM menu - i shift+tab - which starts me at the menu location button - and runs from the end of the menu to the start screen - which is all functional, except I cannot change quick search functions.

When the menu is below the WP top menu - Skip to main content works - however skip to toolbar - skips to the WP top admin menu - then to CiviCRM in left sidebar, and finally page content. Still the quickest way to CiviCRM menu - albeit the end of the menu is Shift+Tab

In Drupal, There is no skip to toolbar option, I only get the skip to main content option, which isnt really much of a help in my case - as I could get to the content in just a couple extra tabs on most pages - maybe others have a lot more content at the top than I do. Still to access toolbar - I enter Shift+tab to get to the end of the toolbar. Quick search options are not selectable - but everything else works.

[colemanw]

@artfulrobot your screenshot makes it look like adminimal_admin_menu isn't working correctly - it is supposed to collapse to a hamburger on small screens but is failing to do so?

[artfulrobot]

Ah it is working correctly, but has the responsive thing turned off (I must have found that annoying for some reason!). OK, please ignore this :-)

[themak1985]

On D7 - is Shift-Tab really the fastest way to get to the menu? When simply pushing tab, the option to skip to main content is there - but not the option to Open CiviCRM Menu.

On Wordpress - Open CiviCRM Menu is there and works - but is there a way to cycle through the options without first cycling through CiviCRM Home, Hide Menu and Log Out.

[andrewpthompson]

@colemanw - these are my results for Joomla. My comments are in italic.
Joomla!

• General

  • Keyboard interaction works as expected. As others have mentioned for other CMS, it is cumbersome to get the menu in focus (lots of shift+tab or tab); it's possibly worse on Joomla. An access key would be helpful. Once the menu has focus, keyboard interaction works correctly, no problems found. Example: on the 'New Survey' page, I had to press Tab 28 times or Shift+Tab 37 times before the menu had keyboard focus.
  • Quicksearch works as expected.
  • Collapse to mobile on small screens - hamburger-civi button is well positioned.
  • Mobile menu behaves well and scrolls when too long for the viewport.
  • Menubar works on touch devices.
  • Mobile menu works on touch devices.

• Position: Over Joomla Menu

  • Shows up correctly and prevents interaction with CMS menu.
  • Hide/show works as expected.
  • Menu does not overlap page content even when wrapped to 2 rows.

• Position: Below Joomla Menu

  • Shows up correctly and allows interaction with CMS menu.
  • Hide/show works as expected.
  • Menu does not overlap page content even when wrapped to 2 rows.

• Position: Above Content Area Not sure if I understand this test correctly - on Joomla we only have two states for menu position as far as I can see: over Joomla menu and below Joomla menu. Anyway in both the "Over Joomla menu" and "Below Joomla menu" position the menu does not overlap page content and the menu collapses to hamburger if the viewport is small.

  • Menu does not overlap page content even when wrapped to 2 rows.
  • Collapses to hamburger menu.

Summary of my other points noted earlier, all others have been resolved:

1. On IE11 the main browser window vertical scrollbar appears on top of the 'adjust position' icon Improve loading speed and browser compatibility #26 (comment)
2. On Edge 42 the Quick Search icon is not displayed (I fully agree with not pursuing this)

[christianwach]

Open CiviCRM Menu is there and works - but is there a way to cycle through the options without first cycling through CiviCRM Home, Hide Menu and Log Out.

@themak1985 Yeah I agree with this - but it may be a result of keyboard navigation being, um, inconsistent in SmartMenus itself. (FWIW I wish I could point to a page on their docs site that documents the keyboard interactions, but cannot for the life of me find one! Help?)

A solution could be to comment out this line so that the dropdown is not opened when CRM.menubar.open('Home'); gets called. That way hitting Tab takes you through the top-level menu items so you can quickly move to the one you want. However, the visual cue that KAM is active is significantly less obvious.

@colemanw My biggest frustration with SmartMenus is that Space opens sub-menus but does not close them. In fact, I can't find a key that does. So, whilst not opening the sub-menu when KAM is focused helps immediate usability, it's still annoying that I can't look at the content of a sub-menu without permanently causing KAM to open all sub-menus by default. Is there a way to make Space toggle the sub-menu?

[aydun]

Here's the link to the keyboard addon: http://vadikom.github.io/smartmenus/src/demo/keyboard-navigation.html

[christianwach]

@aydun Thank you - that was driving me crazy! Esc FTW 👍

[colemanw]

Not sure if I understand this test correctly - on Joomla we only have two states for menu position as far as I can see: over Joomla menu and below Joomla menu.

@andrewpthompson this is actually a setting the extension adds to Administer -> Customize Data & Screens -> Display Preferences - the first option is the default and can be toggled on-the-fly to the 2nd option. But you have to visit Display Preferences to choose the "Above Content Area" option. I view it as kind of Legacy, but some Joomla folks like @lcdservices are really used to having it there so I put that in for them.

[andrewpthompson]

@colemanw - that makes sense now. I've now tested all 3 positions on Joomla so these can now be ticked:

Joomla!

• Position: Above Content Area
  • Menu does not overlap page content even when wrapped to 2 rows.
  • Collapses to hamburger menu.

[themak1985]

@colemanw do you still need testing on these?

• Position: Below Wordpress Menu
  • Menu does not overlap page content even when wrapped to 2 rows.
• Position: Above Content Area
  • Menu does not overlap page content even when wrapped to 2 rows.
  • Collapses to hamburger menu.

[colemanw]

@themak1985 yes please!

[themak1985]

@colemanw Just tested in two environments for you. When the menu bar is below the wordpress menu that is wrapped to two lines - it does not overlap with page content - but it does a little hop - the same happens when its over the wordpress menu - so its fine. Alternatively - it would be nice if additional items would be in a "more" menu item instead of wrapping to an additional line. - see image example below. We never really had the two line option until shoreditch came along - the current soon to be replaced Civi menu would simply not show you any of the remaining items. Do people rely on the two line setup.

As for the menu bar above content area - the Menu does not overlap page content even when wrapped to 2 rows and does collapse to a hamburger menu in the wordpress admin menu - but it does not adopt the wordpress menu color like it does when over or below the menu bar. See below.

Sidebar - we use the wordpress admin style by @christianwach - but I just noticed - when that is disabled - the menu - regardless of lines or location - slightly covers the print icon. Maybe just slightly lower the print icon in core ;).

Also note - the search icon in the quick search box is gone.

Example of more menu.

Hamburger menu when civi menu replaces or is below wordpress menu bar. Also notice bottom of menu bar.

Hamburger menu when civi menu is above content area.

Print icon when CiviCRM Admin Utils Styles is disabled.

[christianwach]

the menu - regardless of lines or location - slightly covers the print icon. Maybe just slightly lower the print icon in core

@themak1985 Yup, that's one of the things that CAU fixes in CiviCRM-WordPress. The declaration is duplicated in both the admin theme and the menu fixes because the menu-fixing option used to be called "Prettify CiviCRM" and I didn't want to confound people's expectations when the admin theme was released and people hadn't enabled it. I agree that a fix for that should be in core.

[andrewpthompson]

@colemanw Regarding these two Joomla tests, I'd be happy for them to be marked as having passed. I tested the normal menubar for proper touch operation on a tablet PC, with multiple browsers. Same for the mobile menu plus also on an Android 8 phone with both Chrome and Firefox browsers.

Joomla!

• Menubar works on touch devices.
• Mobile menu works on touch devices.

[themak1985]

In beta 4 - I have had a couple situations in wordpress and in drupal where the menu will fall to the bottom of the screen. Can only be fixed by cleaning up cache.

seems to happen when updating civicrm or any of the extensions.

[colemanw]

@themak1985 next time that happens please right-click on it and inspect - try to find out what css rule is causing it.

[laryn]

Backdrop Testing

• General

  • Keyboard interaction works as expected. Can't seem to activate the keyboard interaction

  • Quicksearch works as expected.

  • Collapse to mobile on small screens - hamburger-civi button is well positioned. Not great (see screenshot)
    

  • Mobile menu behaves well and scrolls when too long for the viewport.

  • Menubar works on touch devices. Need to test this yet

  • Mobile menu works on touch devices. Need to test this yet

• Position: Over Backdrop Menu

• Shows up correctly and prevents interaction with CMS menu.

• Hide/show works as expected.

• Menu does not overlap page content even when wrapped to 2 rows. Doesn't overlap but can't get it to wrap to 2 rows (it goes to mobile mode)

• Position: Below Backdrop Menu

• Menu does not overlap page content even when wrapped to 2 rows.

• Menu scrolls with page like the CMS menu. (Although CMS menu can be configured to be sticky at the top, it scrolls by default)

• Position: Above Content Area

• Shows up correctly and does not obscure content. Contact name is displaying strangely (see screenshot); apparently due to a negative top margin on #crm-container div#printer-friendly
  

• Collapses to hamburger menu. Yes, but positioned strangely as above

• None / Disable Menu

It shows up strangely in the footer when the menu is set to be disabled:

[themak1985]

Ok, it happened again (when upgrading from Beta4 to stable) - menu shifted to bottom - I am not quite sure what to look for but I noticed that when the menu is at the bottom, the menu toggle button can be inspected somewhere up top. The toggle button is not visible when the menu is at the bottom. Maybe there is something there?

Observations:
For #civicrm-menu-nav .crm-menubar-toggle-btn { - position: relative; is crossed out.
For #civicrm-menu { background-color: #f2f2f2; width: 100%; z-index: 500; height: auto; margin: 0; } all but width and margin is crossed out

For .sm { box-sizing: border-box; position: relative; z-index: 9999; -webkit-tap-highlight-color: Z-index is crossed out.

I am starting to wonder if maybe shoreditch is causing these issues - but why does clearing the cache resolve it.

[colemanw]

@laryn I've pushed up some more improvements:

• Fix menu junk at bottom of screen when menubar is disabled
• Better position for the civi hamburger on backdrop
• Follow backdrop setting for keeping menubar at top of screen

[laryn]

I can confirm the junk at the bottom is gone on a disabled menu now, and it follows the Backdrop admin menu 'sticky' setting (if it is in "Replace Backdrop menu" mode; not if it's "Underneath Backdrop menu", which may be by design).

The hamburger still shows up essentially the same for me. If I fiddle in the inspector I can adjust the CSS to get something like this:

I suspect that I can't just fiddle though, or it will throw things off for other CMS's?

[colemanw]

@laryn this extension includes a js and css file specific to each CMS. So position tweaking for BD should be done in the menubar-backdrop.css file.

The change I made does cause the position to follow the BD position setting whether it's replacing or underneath the BD Admin menu, strange that you don't see that taking effect - maybe clear your cache.

I guess you're using a theme other than the stock one we get with buildkit because your BD Admin menu looks different than mine. For small screens my recent change positions the civi hamburger like so:

[laryn]

@colemanw I think it is a subtheme of stock but I didn't think I made any changes that would affect the admin menu. Regardless -- I'll test again on a fresh install as soon as I get a chance.

[laryn]

@colemanw Ah -- which version of Backdrop does buildkit pull? The latest version (1.12) makes significant changes in the admin menu.

[colemanw]

@laryn looks like buildkit pulls the latest 1.x but that change was fairly recent. I've upgraded my buildkit install and the menubar continues to correctly follow the BD setting for sticking to the top of the screen. Now the menu looks like this on small screens:

Is that not what you're seeing?

[laryn]

@colemanw That's not what I'm seeing but I'll test on a fresh install.

Aside: it would be nice to make the hamburgers match.

[laryn]

@colemanw I tested on a fresh install and it looks like yours so it must be something on the other site (Maybe remnants of installing Shoreditch). I made a few tweaks in the Backdrop file. See what you think:

#43

Results in this: