Modify Sydney Responsive Menu Breakpoint

Hello,

I want to modify the sydney mainnav breakpoint to make it collapse at 900 px instead of 1024. How can I do it?

Kind regards,

Kevin.

PD Thanks for the awesome theme :wink:

Dear Kevin,

Thank you for asking.

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.

  1. To make it collapses at 900px, change it to the following.
if ( matchMedia( 'only screen and (max-width: 900px)' ).matches ) {
  currMenuType = 'mobile';
}
  1. Save the changes, then update it through FTP or cPanel

CSS adjustment

Next, you should make a couple of CSS adjustment. Could you try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (min-width: 901px){
 
  #mainnav{
    display: block !important;
  }  
  
  .btn-menu{
    display: none !important;
  }
  
  .site-header{
    background: transparent !important;
  }
  
}

@media only screen and (max-width: 1024px){
  
  .site-header{
    position: absolute !important;
  }  
  
}  


@media only screen and (min-width: 901px) and (max-width: 991px){
  
  .header-wrap > .container{
    width: 900px;
  }
  
  .header-wrap .col-md-4.col-sm-8.col-xs-12{
    width: 30%;
  }
  
  .header-wrap .col-md-8.col-sm-4.col-xs-12{
    width: 70%;
  }
  
}  

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

Warmest regards,
Kharis

P.S.

Since you were trying to modify the main theme’s JS file, you should take it at your own risk. Once you perform theme update in the future, the modifications have been done will be lost. You should do an adjustment.

Warmest regards,
Kharis

Thank you for your fast reply, but something is failing. I’m using a child theme and you can check the site here: lumer.kevinmamaqi.com

The CSS and the JS are rewrited using functions enqueue/dequeue script.

Dear Kevin,

I thought you can rewrite the main JS file js/main.min.js in the child theme by using wp_dequeue_script() function.

Add the following code in the child theme’s functions.php file.

function sydney_child_dequeue_script() {
   wp_dequeue_script('sydney-main');
}
add_action( 'wp_print_scripts', 'sydney_child_dequeue_script', 100 );

To enqueue the child theme JS file, try to add the following.

add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
function sydney_child_enqueue() {

    wp_enqueue_script( 'sydney-main-child', get_stylesheet_directory_uri() . '/js/sydney-main-child.js', array('jquery'),'', true );

}

Rewrite the sydney/js/main.min.js script in the child theme sydney-child/js/sydney-main-child.js

Custom CSS

I thought you shouldn’t to worry about it as it will be handled by the Simple Custom CSS plugin. Updating the theme won’t remove the custom CSS codes you have added because it’s stored in the different location.

I hope this reply helps.

Warmest regards,
Kharis

Thank you, it works well.

Dear Kevin,

Thank you for updating me.

I am glad to know that it works for you.

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

I am happy to have an opportunity to assist you.

If you found this support reply useful enough, could you please rate our Sydney theme here? Of course, if you don’t mind. We would highly appreciate it if you do so.

Have a nice day.

Warmest regards,
Kharis

Done :wink:

Dear Kevin,

Thanks a million for your time and review. That’s very mean for us.

Have a nice day. :slight_smile:

Warmest regards,
Kharis

Hello,

I am new to WordPress and I love your theme

I want to put some arrows to the slider too (using a child theme) but cannot access all the JS files and modify them so I am really lost.

Please help

Hello
I really need your help

I want to do exactly the same as Kevin Mamaqi but I am not using a child theme.
I have wordpress 4.7.4 and sydney free theme version 1.38

Your instruction is not working for me. I edited the js/main.min.js and replaced it via ftp server and added the custom css.

After these changes I pressed F5 on my site but there is no change.

sorry but I just started to work with wordpress last week! xD

thank you and best regards

Hello there,

Please share the final code in your main.min.js file to https://gist.github.com/ and share its link here, so I can check it. Has your site gone live? Please share your site link here, if possible.

Regards,
Kharis

Thank you for your fast reply!

My website is not online yet. I will try to provide as much as information as i can

To be clear: I want to make the menu (“TEST1 - TEST5”)–> check the screenshot; to break down later(delay the switch to the mobile menu icon).

Here is a screenshot of my menu


I tried to identify the menues id and I found out that is called “menu-menue” ?

  1. I copied the whole content of main.js into main.min.js(replaced all content).

  2. I changed the following line:

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

into

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

  1. I saved the changes and deleted the “original” main.min.js file and replaced it with the edited one via ftp-upload

  2. Here is the modified main.min.js file:
    <script src=“https://gist.github.com/anonymous/bae18ee526727c3fc26ccdbb827a185a.js”></script>

  3. CSS adjustments I did by using custom CSS:

@media only screen and (min-width: 901px){

#mainnav{
display: block !important;
}

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

.site-header{
background: transparent !important;
}

}

@media only screen and (max-width: 1024px){

.site-header{
position: absolute !important;
}

}

@media only screen and (min-width: 901px) and (max-width: 991px){

.header-wrap > .container{
width: 900px;
}

.header-wrap .col-md-4.col-sm-8.col-xs-12{
width: 30%;
}

.header-wrap .col-md-8.col-sm-4.col-xs-12{
width: 70%;
}

}

Hello there,

This gist you shared doesn’t seem to work. It doesn’t contain the correct JS script.

Please email me your main.min.js file to kharisblank@gmail.com and mention the link to this topic in your email body.

Regards,
Kharis

Here is the right link :slight_smile:

Hello there,

I copied the code in your main.min.js along with the custom CSS code and applied it on my test. It works as expected. Please share your site link here, so I can try to debug it directly from your site.

Regards,
Kharis

Dear Kharis Sulistiyono

it is working now!!
The problem why it wasnt working is hilarious…

To test the custom css stuff I opened the webpage using wordpress’s link “to website”.
Using that screen I have the black wordpress-bar at the top.
This stupid bar led to a NON-working responsive menu.

I made my webpage public and then just opened it directly and everything worked fine -_-…

Anyway, thank you very much for your fast and kind support !!!

Best regards!

Thank you for updating me. I am glad to hear you got it resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis