Mobile Menu

Hello,

I’m trying to remove the mobile menu, leaving the desktop menu at all times. I tried the solution given in “https://athemes.com/forums/topic/header-menu-on-larger-tablets/” and adapting it to my needs but it doesn’t work. Basically I’d like to get rid of the “hamburger” menu.

Thank you very much for answering all my questions.

Dear Hadin,

In order to achieve that objective, could you please try to do the following?

  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: 0px)' ).matches ) {
  currMenuType = 'mobile';
}
  1. Save the changes, then update it through FTP or cPanel

CSS adjustment

Try to apply the following CSS code through the Simple Custom CSS plugin:

@media only screen and (max-width:1024px){
  
   
  .btn-menu{
    display: none !important; 
  }
  
  #mainnav{
    display: block !important;
  }
  
  
}


@media only screen and (max-width:767px){
  
  #mainnav{
    float: none !important;
  }
  
  #mainnav .menu{
    display: table;
    margin-left: auto;
    margin-right: auto;    
  }
  
}  

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Hello,

Thank you very much! It works! I must have made a mistake earlier when I tried. Although another problem related to the menu cropped up. I don’t know if the problem was there before as I just got an Ipad to test things out properly.

When it is in landscape it’s great but in portrait mode the menu has moved down for some reason. Is there a way to fix it so it stays in same spot whether it is in landscape or portrait? I don’t have a smartphone to test it on but I’m guessing the same problem occurs there too.

I ask because the image I use as a background has a perfect spot for the menu but it is not in that spot only in portrait mode.

Thank you once again

Hello there,

Thank you for updating me. I would like to apologize in advance for delayed reply.

Could you please try to change the CSS code I previously suggested with the following?

@media only screen and (max-width:1024px){
  
   
  .btn-menu{
    display: none !important; 
  }
  
  #mainnav{
    display: block !important;
  }
  
  
}


@media only screen and (max-width:767px){
   
  .header-wrap .col-xs-12{
    width: 33.33333333%;
  }
  
  .header-wrap .col-md-8{
    width: 66.66666667%;
  }

  .site-title,
  .site-description{
    text-align: left;
  }
  
  #mainnav .sub-menu li a {
   text-align: left; 
  }  
  
}  

Let me know how it goes.

Regards,
Kharis

It worked! Thank you very much! I had to add “Top:” after the “.col-md-8” line though.

Once again thank you very much!

Hello Hadin,

Thank you for updating me.

I am glad it worked. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

If you don’t mind, could you please rate our Sydney theme here? We would highly appreciate it if you do so.

Thank you for creating with our product.

Have a nice day!

Regards,
Kharis