Navbar menu mobile/desktop toggle on breakpoints while resizing

Support
#1

Hello,

I’m experiencing a very glitchy menu.

  1. I have a quite long navbar menu, that best fits 1310px and above.
  2. below 1310px, I would want to have it changed to mobile menu view
    3.anything above 767px, will make menu appear only on scrolling
  3. anything below 767px will display menu immediately, but show logo only on scrolling

I succeeded making most of it work. BUT, mobile button on desktop view doesn’t open up menu. and if I resize to mobile view it also doesn’t respond (but if I start from mobile view, it works). this behavior is very inconsistent.

I wrote a function that runs on ready, on resize and on scroll
it’s implemented on custom css/js of page itself.

JS:

  jQuery(document).ready(function($) {
  var navbar = $('.x-navbar'),
  windowsize_mobile = "767",
  windowsize_burger = "1310",
  navbar_btn = $('.x-btn-navbar');
 
    function headerchange()
  {
    if (($(window).width() >= windowsize_burger) && ($(window).scrollTop() > 300)) {
        navbar_btn.removeClass('smallscreen');
        navbar.addClass('alt-color');
        navbar.addClass('screen');
        $('.x-nav-wrap.desktop').css('display','');
        $('.x-nav-wrap.mobile').css('display','none');
    }
    else if (($(window).width() >= windowsize_burger) && ($(window).scrollTop() <= 300)) {
        navbar.removeClass('screen');
        navbar.removeClass('alt-color');
        navbar_btn.removeClass('smallscreen');
        $('.x-nav-wrap.desktop').css('display','none');
        $('.x-nav-wrap.mobile').css('display','none');
    }
    else if (($(window).width() < windowsize_burger) && ($(window).width() > windowsize_mobile) && ($(window).scrollTop() > 300)) {
        navbar.addClass('screen');
        navbar_btn.addClass('smallscreen');
        navbar.addClass('alt-color');
        $('.x-nav-wrap.mobile').css('display','');  
        $('.x-nav-wrap.desktop').css('display','none');
    }
    else if (($(window).width() < windowsize_burger) && ($(window).width() > windowsize_mobile) && ($(window).scrollTop() <= 300)) {
	    navbar.removeClass('screen');
        navbar_btn.removeClass('smallscreen');
        navbar.removeClass('alt-color');
        $('.x-nav-wrap.desktop').css('display','none');
        $('.x-nav-wrap.mobile').css('display','none');
    }
  else if (($(window).width() <= windowsize_mobile) && ($(window).scrollTop() < 150))
    {
		$('a.x-brand.img img').attr('src','http://www.midgam.co.il/wp-content/uploads/2017/07/Empty2-1.png');
		navbar.addClass('screen');
		navbar_btn.addClass('smallscreen');
		navbar.addClass('alt-color');
        $('.x-nav-wrap.desktop').css('display','none');
        $('.x-nav-wrap.mobile').css('display','');		
    }
    else if (($(window).width() <= windowsize_mobile) && ($(window).scrollTop() >= 150))
      {
        $('a.x-brand.img img').attr('src','http://www.midgam.co.il/wp-content/uploads/2016/11/Midgam-logo-white2.png');
        navbar.addClass('screen');
        navbar_btn.addClass('smallscreen');
        navbar.addClass('alt-color');
        $('.x-nav-wrap.desktop').css('display','none');
        $('.x-nav-wrap.mobile').css('display','');
      }
    return;
  }
  
	// On ready
	headerchange();

	//On resize
	$(window).resize(function(){
		headerchange();
	});

	//On scroll
	$(window).scroll(function(){
		headerchange();
	});
});

CSS:

.x-navbar.screen {
  background-color: #394e92;
  box-shadow: 0px 0px 0px #ffffff;
  color: #ffffff;
  transition: 0.3s all ease-in-out;
  visibility: visible;
  border-bottom: 0;
}
​
.x-btn-navbar.smallscreen{
  display: block !important;
  float: right !important;
}
.x-navbar .x-nav-wrap.desktop li a {
    color: #000000;  
}
.alt-color .x-btn-navbar.collapsed .x-icon-bars {
    color: #ffffff !important;
}
.x-navbar.alt-color {
    background-color: #394e92;
    box-shadow: 0px 0px 0px #ffffff;
    transition: 0.3s all ease-in-out;
    visibility: visible;
}
.x-navbar .x-nav-wrap.desktop li a {
    color: #ffffff; 
}
.x-navbar.alt-color .x-nav-wrap.desktop li a:hover {
    color: #7985ac; 
}
​.x-navbar .desktop .x-nav > li:first-child > a, .x-navbar .desktop .x-nav > li > a {
    border: none;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > li.x-active > a, .x-navbar .desktop .x-nav > li.current-menu-item > a {
    box-shadow: 0 0px 0 0 #ffffff;
}
@media (max-width: 1310px){
.x-navbar-wrap {
   margin-bottom: 0px; }
    .site {
        margin-top: 0px;  
    }
.x-btn-navbar
  {
    padding-top:20px;
  }
.x-navbar {
        position: fixed !important;
        width: 100%;
        left: 0;
        top: 0;
        right: 0;
    }
}
.x-btn-navbar
{
  vertical-align: middle;
}
.x-btn-navbar.collapsed:hover,.x-btn-navbar.collapsed:hover {
  color: #ffffff;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
  color:#ffffff;
}
#2

Hi There,

When I checked your site, I got this JS error from the console:

  (index):888 Uncaught SyntaxError: Invalid or unexpected token

It is pointing to an open comment tag. See the last part from this code:

/*
jQuery(document).ready(function($){
$('.x-btn-navbar').click(function(){
	if($(".x-nav-wrap.mobile").is(':visible')){
		$('.x-nav-wrap.mobile').css("display", "none");
	}
	else{
		$('.x-nav-wrap.mobile').css("display", "block");
	}
});
});*//*

/* from the last line is considered an open tag for comment. Since the closing is missing, it returns an error. Remove it. Last line should be:

});*/

Comments should be like this:

/* This is a multiple 
    line comment */

Hope this helps.

#3

Hey Lely,
Thank you so much for bringing this to my attention.
Alas, the issue remains.

www.midgam.co.il
Mobile navbar button doesn’t work in any size wider than 980px.
I don’t have any custom definitions I made for 979/980/981 px…

I noticed references to @(media (max-width: 979px) when editing source HTML but I still don’t understand what configuration is preventing it from opening up the menu…

#4

Hi there,

May I know some visual guide of what you’re trying to achieve? We don’t usually support complex custom code such as this, but it may just need some tuning, though, I’m confused what the codes should do.

For the meantime, you may consult it to a developer familiar with javascript.

Thanks!