Hamburger Menu

Hi,

How do i force the hamburger menu to appear when the resolution drops below 1280 pixels?

Thanks,

Harkz

Dear Harkz,

Thank you for asking.

Currently there is no an instant way to do so though. You still be able to achieve such that objective by editing the theme’s main JS file.

  1. Open the js/main.js in your code editor, then copy the whole content of it; then paste it into js/main.min.js. So it will be more readable

  2. In the js/main.min.js, find the following code block:

if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
	currMenuType = 'mobile';
}

Here is the viewport breakpoint was specified.

  1. Change it to the following:
if ( matchMedia( 'only screen and (max-width: 1280px)' ).matches ) {
  currMenuType = 'mobile';
}
  1. Apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css.
@media only screen and (max-width:1280px){
  
  #mainnav{
    display: none;
  }
  
  
  .btn-menu{
    display: block;
  }  
  
}

Once you are done, you would need to clear you web browser’s cache before reloading your site.

As you are editing the theme’s core file, you should take it at your own risk. The changes you have made there will be lost once the theme gets updated in the future. So you should do this adjustment again.

Regards,
Kharis

Perfect Thanks! Problem Solved

Having an issue where the drop down menu doesn’t stay open now…
Any reason why this could be?

Dear Harkiat,

Thank you for reporting. Does that issue happen after you resized the web browser’s window?

If so, try to apply the following CSS code:

@media only screen and (min-width:1281px){
	.sub-menu{
		display: block !important;
	}
}

Regards,
Kharis

I resize the browser and the hamburger menu appears now when the window size is below 1280px but when i click on the hamburger icon the main menu appears for a second but doesn’t stay open.

www.resonateconsultancy.com is the website so you can see what the problem is.

Hi Kharis,

Any updates on how to fix this as the problem is still occurring.

Kind Regards,

Harkz

Hello there,

I would like to apologize in advance for the delayed respond.

Edit the js/main.min.js file. Then unminify it, so it will be more readable. You can use http://unminify.com tool.

Replace the following line


f (matchMedia("only screen and (max-width: 1024px)").matches && (a = "mobile"), a !== e)

with


f (matchMedia("only screen and (max-width: 1280px)").matches && (a = "mobile"), a !== e)

Update the changes. You would clear your web browser’s cache before reloading your site.

Regards,
Kharis

Problem Solved !

However would this also be having a problem on the sub-menu playing up.
See www.resonate-consultancy.com for problem with sub-menus i.e. when you hover over portal and try to click one of the sub menu items it goes out of alignment.

Thanks Kharis.

Hello there,

Thank you for updating me. I am glad to know that the problem has been resolved already.

This site resonate-consultancy.com can’t be accessed here. The screen says “dial tcp: lookup resonate-consultancy.com on 127.0.0.1:53: no such host”. Is there any other way to access it?

Regards,
Kharis

apologies Kharis,

the website link is www.resonateconsultancy.com

Hello there,

Try to apply the following CSS code:

.sub-menu > li > a:hover{
  margin-left: 0 !important; 
}  

Let me know how that works.

Regards,
Kharis