[s-design]

Theme: Catch Everest Pro
URL: Currently Working Local

I really like this theme. It has a great design and a bunch of nice features.

I am trying to find a way to indent the sub menu items in the mini/mobile nav using css styles. Currently, I haven’t been able to do this with css.

I have been able to change them by playing with the code in js/catcheverest-menu.min.js

In js/catcheverest-menu.min.js I changed this code:

.parents("ul, ol").length-1;t++){l+="- "}
Here is a screen shot of what the mini menu looks like before the code change:

to this:
.parents("ul, ol").length-1;t++){l+="  -   "}
Here is a screen shot of what the menu looks like with the code changed:

When I do this it creates the change I am looking for but I don’t know if this method is the correct way to do this. My guess is that it is not. I would like to do this same thing in the custom css theme options in the admin back-end. Is this possible, if so what code would I use?

Thanks for your help in advance.

[s-design]

Sorry here are the links to the screen shots.

Here is a screen shot of what the mini menu looks like before the code change:
Screen shot of unchanged mini nav

Here is a screen shot of what the menu looks like with the code changed:
Screen shot of new mini nav

[s-design]

The second line of cod should be like this: but without the spaces after these “&”

parents("ul, ol").length-1;t++){l+="& nbsp; - & nbsp; "}

[Sakin]

@s-design: Yes the way you are working on is fine. You just need to change that code in your child theme not in the theme itself. As all the edits in the core theme files will be reverted back when you perform updates.

Theme options css will not be able to do this.

[s-design]

Thank you for this information.

I have created a child theme.
In the child theme I have been able to modify:
header.php
functions.php
footer.php
style.css

I can not get the files in sub-folders to be recognized, such as:
js/catcheverest-menu.min.js (related to the needed code modifications above)

Any thoughts on why this might be happening?
Or, what I need to do to get those files to be recognized?

[Sakin]

@s-design: for changes in menu js. Just create function in your child theme functions.php which remove the patent theme js and add new js. See the example function as below.

function catcheverest_remove_scripts() {
    // Remove parent theme small menu
    wp_dequeue_style( 'small-menu' );

    // Now register your styles and scripts here
}
add_action( 'wp_enqueue_scripts', 'catcheverest_remove_scripts', 20 );

[s-design]

I put this code (see the code below) into my child theme functions.php, it works! The changes I wanted to make to the mini nav show up in the browser without changing the parent file: /js/catcheverest-menu.min.js

I placed this new file I created here: my-child-theme-name/js/catcheverest-menu.min.js

I just wanted to check with you to see if all my code is correct. If not what do I need to tweak? Thank you for all your help.

function catcheverest_remove_scripts() {
    // Remove parent theme small menu
   wp_denqueue_script( 'small-menu');

    // Now register your styles and scripts here
}
add_action( 'wp_denqueue_script', 'catcheverest_remove_scripts', 20 );

// Load some javascripts for child theme
add_action( 'init', 'load_child_js' );
function load_child_js( ) {
 wp_enqueue_script('small-menu', get_bloginfo('stylesheet_directory').'/js/catcheverest-menu.min.js', array('jquery'));
}

[s-design]

After thinking about it more… I am now wondering if there is a way to change only the small bit of code I need changed in the catcheverest-menu.min.js file using only my child-theme/functions.php, instead of what I did:

1. Copied and cloned the whole catcheverest-menu.min.js file.
2. Modify the tiny part I needed tweaked to create the desired effect.
3. Placed this new version I made into my child-theme file.
4. Then add the code in the functions file to replace the parent version with my child version (using the code in my previous post).

I am thinking that if I can replace only the small part of code inside this file, instead of replacing the whole file, it would be better. This way if another part of the code in the catcheverest-menu.min.js file is modified when the parent theme is updated it won’t be overwritten by my replacing the whole file.

Is this line of thinking correct? If so, how do I replace only the small part of code?

Just to recap:
This is the original code in the catcheverest-menu.min.js file that I am wanting to change: .parents("ul, ol").length-1;t++){l+="- "}

I want to change it to this: parents("ul, ol").length-1;t++){l+="  -   "}

[Sakin]

@s-design: Your code is fine. No there is no option, you need to edit that file in child theme.

[Author]

Posts