Changing when Header Nav changes to mobile display?

Support
#1

Hi there,

I have had this site translated, and the traslator wants to keep more main menus to highlight things more clearly.

This is fine but now the menu drops below the logo for some pixels before it breaks into the mobike nav button.

Is there a way to change when the menu breaks from the desktop version to the mobile button?

Thanks in advance - Jade

#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

#3

Hi,

The site is http://www.evergreen-skischool.com/cn/

Thanks in advance.

#4

Hi Jade,

Please try this code in the custom CSS:

@media (max-width: 1028px) {
    .x-nav-wrap.desktop {
         display: none;
    }

    .masthead-inline .x-btn-navbar {
        display: block;
        float: right;
    }            
}

@media (min-width: 1029px) {
    .x-nav-wrap.desktop {
         display: block;
    }    
}

Hope this helps.

#5

Great! This works.

#6

You’re most welcome!

#7

I have this site here as well but in another language; it has an even bigger menu and a flag button. I’m trying to achieve the same thing. I have tried the above code, and editing it, with no luck. Can you help out??

#8

Hi there,

It should be working, and it is. The issue in that one is javascript related, the mobile menu doesn’t open once clicked. Would you mind providing your admin login credentials in a secure note?

And for the meantime, please remove the custom javascript from your global custom javascript but make sure to back it up. Plus, your custom javascript should be like this (please compare it to your existing one)


      (function($) {
   $(document).ready(function() {
      $('.x-recent-posts a').removeAttr( "title" );
   });
})(jQuery);

(function($) {
$(document).ready(function(){
    $(".archive .entry-featured a").removeAttr("title");
});
})(jQuery);

jQuery(document).ready(function() {
  var currentYear = (new Date).getFullYear();
  jQuery("#year").text( (new Date).getFullYear() );
});
         
(function($){

  $('<a id="#link1" href="http://www.evergreen-backcountry.com/ebg/hakuba-backcountry-tours/#kitsune">').insertBefore('#linked-kitsune');
  $('#linked-kitsune').prependTo( $('#link1') );
  

  $('<a id="#link2" href="#process">').insertBefore('#linked-column-2');
  $('#linked-column-2').prependTo( $('#link2') );


})(jQuery);
    
    
jQuery(document).ready(function() {
  var currentYear = (new Date).getFullYear();
  jQuery("#year").text( (new Date).getFullYear() );
});

Thanks!

#9

Thanks @Rad

I have backed up and removed the global custom javascript.

Not sure next step?

Will post login in a secure note.

#10

Hi there,

There is a bit of inconsistency. I can confirm that you removed the javascript but it still displaying in the front site’s source code. Then I noticed that you added the recommended CSS but it’s not displaying in the front site’s source code.

This is probably due to cache, and when I checked your site’s HTTP header information, it has expiration of November

Date:Fri, 06 Oct 2017 01:09:46 GMT
Expires:Sun, 05 Nov 2017 01:00:56 GMT

I tried clearing my browser cache but this looks like your server side’s cache, is there a way we can disable it so we could instantly see the changes we’re adding?

Thanks!

#11

I checked .htaccess and this is all there is - I don’t think this affects cache/headers?

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress

<IfModule mod_deflate.c>

    # Force compression for mangled headers.
    # http://developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping
    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # Compress all output labeled with one of the following MIME-types
    # (for Apache versions below 2.3.7, you don't need to enable `mod_filter`
    # and can remove the `<IfModule mod_filter.c>` and `</IfModule>` lines
    # as `AddOutputFilterByType` is still in the core directives).
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE application/atom+xml \
                                      application/javascript \
                                      application/json \
                                      application/ld+json \
                                      application/rss+xml \
                                      application/vnd.ms-fontobject \
                                      application/x-font-ttf \
                                      application/x-web-app-manifest+json \
                                      application/xhtml+xml \
                                      application/xml \
                                      font/opentype \
                                      image/svg+xml \
                                      image/x-icon \
                                      text/css \
                                      text/html \
                                      text/plain \
                                      text/x-component \
                                      text/xml
    </IfModule>
#12

Hi there,

It could be, please disable all cache related setup and feature. Then please backup your site as I may disable other plugins too while testing.

Thanks!

#13

All done, please test. Thanks.

#14

Hi there,

It’s now working, the changes that I applied are now taking effect. Mobile menu is now toggling and start displaying on 1028px width.

Thanks!

#15

Thank you so much! You truly are Rad

#16

You’re most welcome!

#17

Hmmm…

it is still not breaking in the right place - see the screenshot attached, I’d like it to break before it drops below the logo.

#18

Hi There,

Update the max-width of your media query to 1090 instead of 1028

Hope it helps

#19

Perfect - thank you!

#20

You’re always welcome!

Cheers.