Dear John,
I would like to apologize in advance for delayed reply.
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.
-
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
-
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.
- Change it to the following.
if ( matchMedia( 'only screen and (max-width: 768px)' ).matches ) {
currMenuType = 'mobile';
}
- 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
