Menu only showing with 3 bars

Hello there,

Thank you for reaching out to us here. I would like to ask a thing before going further. What is your screen resolution? You can check it here at https://www.whatismyscreenresolution.com.

Regards,
Kharis

Hello Kharis! My screen resolution is 1024 x 768

Hello there,

In order to achieve this objective, you should modify the main theme’s JS file which was written in the js/main.min.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.

3. Change it to the following.

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

4. 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 (min-width:769px){

  .site-header .col-md-4{
    width: 33.33333333% !important;
    float: left !important;
  }

  .site-header .col-md-8 {
    float: right !important;
    width: 66.66666667% !important;
  }

  .btn-menu{
    display: none !important;
  }

  .mainnav{
    display: block !important;
    top: 0 !important;
  }

}

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

P.S.

As you are editing the core theme’s file, you should take it at your own risk. The future theme update will overwrite the changes you have made in the main.min.js file.

Regards,
Kharis

Hi Kharis – Not to sound like an idiot, but I see the CSS editor, but how do I get to the theme Javascript editor? I created a child theme..

Hello there,

You should edit it locally on your computer. Once you are done, then upload it through FTP of cPanel.

Regards,
Kharis

I changed my computer’s display settings and that did it.

thanks!

Am also having a problem with the mobile menu. It does not appearin mobile devices and therefore i cant navigate to other pages using my mobile phone. Any help will be appreciated!

Hello @daviesaina,

Is your header bar color white? If so, you would change the mobile navigation toggle to become darker. Could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

.btn-menu{
  color: #ff0000;
}

Adjust the hex color code accordingly. If it can’t resolve the problem, please share the link to your site, so I can take a closer look.

Regards,
Kharis