Mobile toolbar icons missing when no header is displayed

I've not received any response from the Mobile Friendly Navigation Toolbar issue queue, and this is quite an urgent issue (for us).

If it's less appropriate here please feel free to move it back, but I thought there's a good chance that this issue could be more closely related to Open Atrium and its customisations than to the navbar module itself.

Another issue, probably related: the admin menu, when opened, does not open over the top of the current page content. Instead, the page content is moved to the right.

Two console errors that might be relevant:

1. "You must install the Colorbox library.
2. ".../sites/default/files/js/underscore-min.map; 404 (Not Found)"

The Colorbox library is installed in /profiles/openatrium/libraries/ and the underscore-min.map file is located in /profiles/openatrium/libraries/underscore/

Copied /profiles/openatrium/libraries to sites/all/libraries, set owner/group to admin:www-data (like the other directories), but still no luck. I also tried putting underscore-min.map into sites/default/files/js, where it's apparently being looked for, but that also had no effect.

I've also just tried uploading modernizr v2.7.1 (with the pre-built min.js file) to both libraries directories as it was not present but is recommended on the navbar project page. Still no change.

Looking at this related question on stackoverflow and this even more relevant drupal.org issue, it seems that .map files are only requested when Chrome DevTools is opened. This particular 404 error would not affect a regular user at all. Disabling Javascript source maps in DevTools's settings prevents this error from appearing in the console log, and the page loads exactly the same.

So there's no evidence that underscore is not loading correctly, or that it's the cause of this issue.

FYI, we are using APC and Memcache - I'm not sure how to clear those, but I'll be looking into that next in case #5 should have fixed this.

1. The (small-width) toolbar elements do not appear on an actual Space landing page (or any other content page);
2. Both the Mobile Friendly Navigation Toolbar (7.x-1.0-alpha10+8-dev) and the Open Atrium Toolbar (7.x-2.0-rc2) modules are enabled;
3. There does appear to be a difference between the HTML markup of our toolbar and a working Pantheon install.

Our site has this:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 radix-layouts-header panel-panel">
      <div class="panel-panel-inner">
      </div>
    </div>
  </div>
</div>

The fresh site has this:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 radix-layouts-header panel-panel">
      <div class="panel-panel-inner">
        <div class="panel-pane pane-oa-navigation">
          <div class="pane-content">
            <div class="oa-navigation clearfix">
              <div class="mobile-menu-icons clearfix">
                <button type="button" class="navbar-toggle user" data-toggle="collapse" data-target="#oa-navbar-user">
                  <img src="http://dev-tfnoa.pantheon.io/profiles/openatrium/modules/contrib/oa_co
re/modules/oa_users/oa-user.png" width="30" height="30" alt="Your profile picture">
                </button>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#oa-navbar-header">
                  <span class="sr-only">Toggle navigation</span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
                  <span class="icon-bar"></span> 
                </button>
                <button type="button" class="navbar-toggle spaces" data-toggle="collapse" data-target="#oa-navbar-spaces">
                  <span class="sr-only">Toggle navigation</span> 
                  <span class="fa fa-square odd first"></span> 
                  <span class="fa fa-square even second"></span> 
                  <span class="fa fa-square odd third"></span> 
                  <span class="fa fa-square even fourth"></span> 
                </button>
                <button type="button" class="navbar-toggle search" data-toggle="collapse" data-target="#oa-navbar-search">
                  <span class="sr-only">Toggle navigation</span> 
                  <span class="fa fa-search"></span> 
                </button>
                <button type="button" class="navbar-toggle admin" data-toggle="collapse" data-target="#oa-navbar-admin">
                  <span class="sr-only">Toggle navigation</span> 
                  <span class="fa fa-drupal"></span> 
                </button>
              </div>
              <div class="collapse navbar-collapse" id="oa-navbar-header">
                <nav class="main-menu pull-left" role="navigation">
                  <div class="oa-banner oa-menu-banner oa-banner-before oa-banner-appeared" data-width="0" data-height="43" style="height: auto;">
                    <a href="/">
                      <img class="oa-site-banner-img" src="http://dev-tfnoa.pantheon.io/profiles/openatrium/modules/contrib/oa_co
					re/modules/oa_widgets/openatrium-powered.png" width="161" height="43" alt="Site banner">
                    </a>
                  </div>
                </nav>
              </div>
              <div class="collapse navbar-collapse" id="oa-navbar-spaces"></div>
              <div class="collapse navbar-collapse" id="oa-navbar-admin"></div>
              <div class="collapse navbar-collapse" id="oa-navbar-search"></div>
              <div class="collapse navbar-collapse" id="oa-navbar-user"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

I reverted the oa_layouts feature last night, remade my changes to the footer (haven't yet mastered features), but that too had no effect. Having just checked, I can confirm that the Search widget does have "search-mobile-menu pull-right" in its CSS Properties.

The overridden features are:

1. Open Atrium Home (removed the default welcome pane and added the Open Atrium News view and other things)
2. Open Atrium Layouts (toolbar mini panel unchanged, but footer mini panel is customised)
3. Open Atrium News (added a flag filter to the view)
4. Open Atrium Work Tracker (due date)

I've checked my scripts.js file vs the working Pantheon site's script.js file, and they're identical. File permissions are the same, too. How can I find out why it's not being executed?

(Thank you for helping with this, by the way!)

I asked our contracted dev to look into it. He's not had much experience with OA, but says that whilst script.js expects to find elements with the class "navbar-toggle", they do not exist in our site's HTML. They should be created by the template profiles/openatrium/modules/apps/oa_toolbar/oa-navigation.tpl.php, but he's not sure what's stopping that from working. I've checked our .../oa-navigation.tpl.php against the fresh Pantheon site's, and they're identical.

I'm going to keep trying to find a fix for this, but if you can think of anything else to try it'd be greatly appreciated!

I did!

Like https://github.com/phase2/openatrium-drops-7/tree/master/profiles/openatrium/modules, at profiles/openatrium/modules/ we have /apps, /contrib, and /panopoly directories. In /profiles/openatrium/modules/contrib/oa_core/modules, there's no oa_navigation directory. (Though, there is still a /navbar directory in /profiles/openatrium/modules/contrib)

In /profiles/openatrium/modules/apps there's an oa_toobar directory, but no oa_navigation.

Our /sites/all/modules/ directory contains apc, devel, memcache, and views_cache_bully.

Status report:

• Info: Drupal: 7.34
• Info: Install profile: OpenAtrium (openatrium-7.x-2.25)
• OK: APC: 3.1.3p1
  
  APC has been running for 6 days 3 hours. Currently caching 2568 entries (26.22 MB).
• OK: Access to update.php: Protected
• Warning: Adv CSS/JS Agg - Enabled: Advanced CSS/JS aggregation is disabled.
  
  Go to the Advanced CSS/JS aggregation settings page and enable it.
• OK: Bootstrap plugin: Installed
• OK: Bootstrap version: jQuery 1.7.1
• OK: CTools CSS Cache: Exists
• OK: Chosen JavaScript file: Installed
• OK: Colorbox plugin: 1.5.14
• OK: Configuration file: Protected
• OK: Cron maintenance tasks: Last run 1 sec ago
  
  You can run cron manually.
• OK: Database system: MySQL, MariaDB, or equivalent
• OK: Database system version: 5.1.73-1+deb6u1
• OK: Database updates: Up to date
• OK: Date API: System date settings
  
  The timezone has been set to Europe/London. The first day of the week has been set to Monday. The medium date format type has been set to to December 6, 2014 - 8:36am. You may find it helpful to add new format types like Date, Time, Month, or Year, with appropriate formats, at Date and time settings.
• OK: Date iCal: iCalcreator library is installed, version: 2.20.2 found
• OK: Drupal core update status: Up to date
• OK: File system: Writable (private download method)
• OK: FullCalendar Colors API: Up to date
• OK: FullCalendar plugin: 1.6.4
• OK: GD library rotate and desaturate effects: 2.0
• OK: GeoPHP Library Installed: GeoPHP 1.1 library installed at profiles/openatrium/modules/contrib/geophp/geoPHP/geoPHP.inc
• Info: GeoPHP and GEOS: GeoPHP library installed and OK. However, GEOS is was not found. While not required, you will see performance improvements if you install the GEOS PHP extension. See the following link for more information.https://github.com/phayes/geoPHP/wiki/GEOS
• Error: Mail Comment: No Mail Comment submodule is enabled.
  
  Mail Comment requires that either the Notifications or Message notify submodules be enabled in order to function properly.
• OK: Mailhandler PHP IMAP: Enabled
  
  Mailhandler PHP IMAP requires that PHP's IMAP extension is enabled in order to function properly.
• OK: Mailhandler iconv: Enabled
  
  Mailhandler requires that PHP's iconv extension is enabled in order to function properly.
• OK: Module and theme update status: Up to date
• OK: Navbar Backbone requirement: The Backbone library is present
• Info: Navbar Libraries requirement: Libraries is enabled. Version 2.x or higher is required. Please check your version if you are experiencing trouble with the Navbar module.
• OK: Navbar Underscore requirement: The Underscore library is present
• OK: Node Access Permissions: 408 permissions in use
  
  If the site is experiencing problems with permissions to content, you may have to rebuild the permissions cache. Rebuilding will remove all privileges to content and replace them with permissions based on the current modules and settings. Rebuilding may take some time if there is a lot of content or complex permission settings. After rebuilding has completed, content will automatically use the new permissions. Rebuild permissions
• OK: PHP: 5.3.3-7+squeeze23 (more information)
• OK: PHP extensions: Enabled
• OK: PHP memory limit: 512M
• OK: PHP register globals: Disabled
• OK: SimplePie: Enabled
  
  SimplePie library is required for Feeds SimplePie Parser.
• OK: SimpleXML: Enabled
  
  SimpleXML PHP module is required for Feeds Syndication Parser.
• OK: Ultimate Cron: Cron is running properly.
• OK: Unicode library: PHP Mbstring Extension
• OK: Update notifications: Enabled
• OK: Upload progress: Enabled (APC RFC1867)
  
  Your server is capable of displaying file upload progress using APC RFC1867. Note that only one upload at a time is supported. It is recommended to use the PECL uploadprogress library if possible.
• OK: Web server: Apache
• OK: jQuery Update: jQuery 1.7.1 and jQuery UI 1.10.2
• OK: jQuery imageAreaSelect: 0.9.10
  
  The jQuery imageAreaSelect plugin is installed at sites/all/libraries/jquery.imgareaselect
• OK: jQuery imagesLoaded: 2.1.2
• The jQuery imagesLoaded plugin is installed at sites/all/libraries/jquery.imagesloaded
• OK: PHP memory limit: 512M

You've got to be kidding... Ha! It works!

Okay, so the new question is: why does the mobile toolbar use a different menu than the breadcrumb toolbar? There are a handful of users on my site who should have access to one Space only, I don't want them to see the menu links for all of the other Spaces they can't access.
P.s. Nice work, Denisev :)

Okay, there's definitely a difference between my existing site and a fresh Pantheon site.

• Both have the same settings at /admin/openatrium/setting (Menus) and at /admin/structure/menu/settings
• Both have empty 'Main menu's
• However, on the Pantheon site, the mobile toolbar displays the Spaces menu (as well as the Admin menu, search icon, etc.)

So, why does one site know to use the Spaces menu (despite allegedly being told to show an empty 'Main menu'), whereas another site will actually only show that 'Main menu' or nothing at all?

Update: With a link in the 'Main menu', my site will use the mobile toolbar, and it will show the expected Spaces menu. However, it will only appear if it is allowed to display something in the 'header' region. Because I've turned off the banner, which is what's behind the 'Navigation' toggle on the Pantheon site, it is insisting on a link from the 'Main menu'. The problem is, putting a link in the 'Main menu' forces it to appear all of the time... which is an unwanted side-effect.

I made a 1x1 transparent image to upload as the banner (position: above toolbar), which still leaves a grey bar above the regular toolbar at desktop width, but is a bit less obviously redundant than putting links in the main menu for the sake of it.

This is a bit of an odd requirement; we were quite happy with just having the toolbar at the top, but the mobile toolbar seems to necessitate either a banner image or links in the main menu.