WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Sub-Nav Bar for Mantra Theme (21 posts)

  1. Einder
    Member
    Posted 2 years ago #

    I'm currently using the [Theme: Mantra] for my site. I would like to modify the code to add a second horizontal nav bar for child pages instead of just a drop down list. I want to make it like the one on Webhostingtalk.

    The closest thing I have found was done by Darren Hoyt, however this places a bar at the top of the page, which isn't what I want to do. Does anyone know enough about the Mantra theme to possibly help with this?

  2. Marventus
    Member
    Posted 2 years ago #

    Hi Einder,

    I'll download the theme and take a look at it. In the mean time, could you post a link to your site in case you made any customizations?

  3. Einder
    Member
    Posted 2 years ago #

    Sure thing. It's The Darkwolf Files.

    I haven't made any customizations really though. Except to the footer. Everything else is stock right now.

  4. Marventus
    Member
    Posted 2 years ago #

    Hi Einder,

    What I would suggest to implement the type of menu you want is to create a separate custom style-sheet for all the CSS and load that script from your theme's functions. That will allow you to keep your original theme almost intact. I say almost because we have to make some tiny little changes in the core files for this to work. Here is how to do it:

    1. In your theme folder, create a file called custom-styles.css, open it and paste the following CSS code inside.

    2. In that same folder, create a file called custom-functions.php and paste the following PHP code inside. That code will load the CSS scripts that we just created into your theme.

    3. In order for the code included in custom-functions.php to work, we need to include it from your theme's functions.php file. Open it up, and paste the following code at the end of the code:

    // Include custom functions for Mantra Theme
    include_once (TEMPLATEPATH . '/custom-functions.php');

    If you see a ?> symbol at the bottom, paste that code before the symbol (can't stress that enough).

    4. You are gonna have to edit the menu.js file since it controls the scroll-down animation, which you no longer need. Open the file, and insert the following line:

    jQuery('#menu-primary ul.sub-menu').css( 'width', jQuery('#menu-primary').width() );

    right under the very first line, which is:

    jQuery(document).ready(function() {

    Then, right under the line you just inserted, type:

    /*

    and change the last line of code, which looks like this:

    }); // ready

    to this:

    */
    }); // ready

    Here is a pastebin of what your menu.js file should look like after those changes.

    That should do the job for you. Your submenus will now be horizontal and only appear when their parent menu item is active. If you are planning on having more than two levels in that menu for using it elsewhere, you need to set the depth parameter to 2 when you call it from header.php. The line responsible for calling the menu is:

    wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );

    To add a depth parameter, change it to:

    wp_nav_menu( array( 'container_class' => 'menu-header', 'depth' => 2, 'theme_location' => 'primary' ) );

    You can style the menu further if you want from custom-styles.css. Don't forget to use important! (before the semi-colon) for properties that are already set in style.css.

    Also, if you don't want to modify the original theme and instead prefer to create your own child theme, let me know and I'll give you specific instructions on how to do that.

    IMPORTANT: As a precaution, I made it so that the new styles are only visible to logged in admins, in case your site is already live and something goes wrong while you implement this. Once you are confident the menu looks the way you wanted, poen your custom-functions.php, and remove this line:

    if ( is_user_logged_in() && current_user_can('administrator') ) {

    as well as the curly bracket (}) right under this line:

    add_action('wp_enqueue_scripts', 'my_mantra_custom_styles');

    Here is a pastebin of what your code should look like after those changes.

    Cheers!

  5. Einder
    Member
    Posted 2 years ago #

    I was hoping as detailed as this is that it would work, however, it's not working at all. Now I just can't access subpages at all.

  6. Marventus
    Member
    Posted 2 years ago #

    @Einder: Funny...
    I was hoping that after all that free work, I would get at least a thank you. Good luck to you...

    For those of you who may land on this thread, the code works. Here is a screenshot of my test blog.

  7. Einder
    Member
    Posted 2 years ago #

    I'm Marventus, it was rude of me to not say Thank You, and I apologize for that. The work was free and I do appreciate it, I'm sorry for my rudnesss.

    I'm still not able to get it to work however. I will keep working on it to see if I can get it to work though.

  8. Einder
    Member
    Posted 2 years ago #

    Sorry for getting the beginning to the last post wrong, it should've been Hi not I'm...it's been a long day for me.. sorry

  9. Marventus
    Member
    Posted 2 years ago #

    s been a long day for me.. sorry

    I can relate to that. Don't worry about it. Sorry I overreacted.

    Now that we got that out of the way (he he he), I just tested this and its working well on my end. I took a fresh copy of the Mantra theme and followed the steps to the letter.
    Here are a couple of things to check or keep in mind to make sure everything is properly set up:
    1. Remember you need to set up your menu properly in the Appearance --> Menu section:
    a. Make sure the Menu you created is assigned a Location. (screenshot 1);
    b. Check if your menu items are properly organized in different levels, ie., level 1, level 2, etc. (screenshot 2);
    2. Remember that your submenus will only be visible when their parent menu is active. That means you need to be inside that item for the menu to appear (screenshot 3).

    Make sure all those settings are in placed and that you followed the steps properly, and I'm confident you will be able to figure it out.
    LMK if you still can't, and I'll try to help you further.

  10. Einder
    Member
    Posted 2 years ago #

    Ahh, that's why it's not working. I was hoping to just change the default menu's that are created to be horizontal instead of vertical, I get now though.

    Thank you, will try this out and see how I like it.

  11. Marventus
    Member
    Posted 2 years ago #

    Hi Einder,

    I didn't get what you meant exactly in your last post.
    Submenus are supposed to appear horizontally with the code I provided. The submenu will only appear if the parent menu item is active and contains subitems. Here is another screenshot that perhaps is more clear than screensht #3.
    If there is something I am not getting, could you please explain it to me again or maybe create an outline in an image editr and upload it as a JPG to imagebin.org so I can see better?

  12. Einder
    Member
    Posted 2 years ago #

    Hi Marventus,

    When you look at [Theme: Mantra] from it's first install after adding pages and subpages, you will see that it already has a submenu coded into it. What I wanted to do was take that submenu, which is already there, and make it horizontal instead of vertical.

    I haven't got a chance to try out your code yet as I have been dealing with some server issues, will let you know when I get it put in though how well it's working.

    Thanks you for your time, it is much appreciated, especially since I don't know much about php.

  13. Marventus
    Member
    Posted 2 years ago #

    What I wanted to do was take that submenu, which is already there, and make it horizontal instead of vertical.

    I didn't see any menus when I enabled the plugin, just the default one which was gone after I assigned my existing menu to a location. Could you take a screenshot of that menu and upload it so I can see what you are talking about?

    I haven't got a chance to try out your code yet

    That really threw my off, since you mentioned in a previous message that you tried the code and it was not working. If you haven't fully implemented the code yet, try to do so and then let me know if it works.

  14. Einder
    Member
    Posted 2 years ago #

    I didn't see any menus when I enabled the plugin, just the default one which was gone after I assigned my existing menu to a location. Could you take a screenshot of that menu and upload it so I can see what you are talking about?

    If you go over to my page The Darkwolf Files, then you can hover over WWE and see the stock sub nav menu. You can also use this screenshot to see it.

    That really threw my off, since you mentioned in a previous message that you tried the code and it was not working. If you haven't fully implemented the code yet, try to do so and then let me know if it works.

    What I meant is that I haven't had the chance to try it with a custom nav menu yet. I thought it would just change the one that was there by default.

    Now that my servers are all back up and good to go, I'm going to try this with the custom menu's and will let you know what happens.

    Thanks for your time on this Marventus. It's much appreciated.

  15. Marventus
    Member
    Posted 2 years ago #

    What I meant is that I haven't had the chance to try it with a custom nav menu yet. I thought it would just change the one that was there by default.

    That makes sense. The default nav menu that appears when you don't have a custom menu set up is a fallback menu that does not use the same CSS classes as the custom nav menu. Once you set up a menu and assign it to a location, it will work as expected.
    Cheers!

  16. Einder
    Member
    Posted 2 years ago #

    I am still getting a vertical menu for some reason :S. Will see if playing with the CSS works.

    Thanks for your help Marventus. It's much appreciated.

  17. Marventus
    Member
    Posted 2 years ago #

    Hello again, Einder.
    I found the source of the issue:
    Your menu id is different from mine, so the JS code I wrote to resize it is not triggering.
    Open your menu.js file and change this line:

    jQuery('#menu-primary ul.sub-menu').css( 'width', jQuery('#menu-primary').width() );

    to this:

    jQuery('#menu-my-menu ul.sub-menu').css( 'width', jQuery('#menu-my-menu').width() );

    That should fix the problem.

  18. Einder
    Member
    Posted 2 years ago #

    That did fix it! Thanks a ton Marventus! I owe you!

  19. Marventus
    Member
    Posted 2 years ago #

    Cool! Thanks for keeping me posted.
    Good luck to you!

  20. Santosh
    Member
    Posted 1 year ago #

    I created a child theme for mantra but it is not working if i ma adding new function to funtion.php or includes/theme-functions.php
    i am adding this code for linking all Post Thumbnails on website to the Post Permalink,
    add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );

    function my_post_image_html( $html, $post_id, $post_image_id ) {

    $html = '' . $html . '';
    return $html;

    }

  21. Marventus
    Member
    Posted 1 year ago #

    Hi santosh,
    Your issue is not the same one as the OP's, so please open a new thread as per the Forum Guidelines (Forum Welcome).
    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic