Hello @llazera,
I guess you are using a device which its screen width less than 1025px. On it, the main navigation shifts into an iconic object and the menu items will be displayed vertically once it gets clicked/tapped. We call it as mobile menu.
To display the main navigation horizontally on 1024px screen width, please follow these steps:
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;
}
}
To sticks the menu at the stop of the screen, add this CSS code:
@media only screen and (min-width: 769px){
.site-header,
.site-header.fixed{
position: fixed !important;
}
}
Because 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
