Nav always shows as mobile on desktop with latest Chrome. This could be related to this issue If this is the problem, then it seems a CSS tweak may be needed.

Adding another discussion on this here

Comments

thedosmann’s picture

Issue summary: View changes
thedosmann’s picture

Changing pages.css (and I also changed pages.scss)

@media all and (min-width: 768px) {
  body:after { /* Used by script.js to determine breakpoint */
    content: 'minw768';
-   display: none;
+  display:block;
+ color:white;
  }

Fixes the issue in Chrome...
Not sure of trickle down issues with this change but I present it here for consideration

thedosmann’s picture

I noticed the trigger 'minw768' shows because it is now displayed as block. I added color:white; as that worked for my background. I know this is not optimal but until the maintainer, or someone else, presents a fix this will work. I may look at this again for a better fix.

thedosmann’s picture

This is what I ended up doing until a consensus is reached on a fix:

I created a 1px x 1px transparent gif named minw768.gif and placed it in neptune/images

I changed pages.css in neptune/css and pages.scss in neptune/sass

/*
 * Media queries
 */
@media all and (min-width: 768px) {
  body:after { /* Used by script.js to determine breakpoint */
 -  content: 'minw768';
 -  content: display: none;
  +   content:url(/sites/all/themes/neptune/images/minw768.gif);
  +  display: block;
  }

I changed script.js in neptune/js

 // If necessary, trigger miniNav().
      // Note: the body:after content is generated via a media query in pages.scss.
      // See: http://adactio.com/journal/5429/ for an explanation.
      var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
   -    if (size.indexOf("minw768") == -1) {
  +    if (size.indexOf("/sites/all/themes/neptune/images/minw768.gif") == -1) {
        miniNav();
      }
      // On window resize...
      $(window).resize(function() {
        // Retrieve body:after.
        var size = window.getComputedStyle(document.body,':after').getPropertyValue('content');
        // If necessary, trigger miniNav().
  -      if (size.indexOf("minw768") == -1 && $("#nav-togg").length == 0) {
 +     if (size.indexOf("/sites/all/themes/neptune/images/minw768.gif") == -1 && $("#nav-togg").length == 0) {
          miniNav();
        }
        // If necessary, remove #nav-togg and show the #navigation div.
   -   else if (size.indexOf("minw768") != -1 && $("#nav-togg").length > 0) {
   +  else if (size.indexOf("/sites/all/themes/neptune/images/minw768.gif") != -1 && $("#nav-togg").length > 0) {
          $('#nav-togg').remove();
          $('#navigation').show();
        }

This fix works around the Chrome bug that was causing the initial issue of always showing the mini nav.

laurencemercer’s picture

thedosmann, thanks for all your efforts on this! Very much appreciated. I hope to have some time this weekend to look at the issue in more detail.

laurencemercer’s picture

Status: Active » Fixed

thedosmann, this should now be fixed in the dev release. Please reactivate if not. Thanks.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

  • Commit 3cdd78f on 7.x-1.x, 7.x-2.x by laurence_m:
    Issue #2206143 by laurence_m, thedosmann: Fixed menu always mobile.