How to make a two tier menu item using Sparkling theme

danebergman · June 15, 2015, 7:02pm

Hi Guys.

Im having a little trouble with creating a sub item drop down option on my main menu.

I have set my menu to have a category (europe) as a sub item and parent to another sub item under it (Denmark).

example: Travel

Europe
Denmark

When I hover over the main menu option Europe drops down, but when I hover over Europe the denmark option does not show up.

Is there anyway I can make it so the drop down menu it two tiered when I hover over it.

Thank you for the help.

Dane

movin · June 20, 2015, 10:36am

Hi Dane,

I hope you are well today and thank you for your question.

You can display the sub menus of sub menu by using the attached child theme of Sparkling theme which contains the following code in the style.css and functions.php files of it.

style.css file :

/*
Theme Name: Child Theme
Template: sparkling
*/

.navbar .nav.navbar-nav ul ul {
  top: 0;
  left: 100%;
  padding: 0;
  margin: 0;
}

functions.php file :

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
	wp_enqueue_style( 'sparkling-bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

if ( ! function_exists( 'sparkling_header_menu' ) ) :
/**
 * Header menu (should you choose to use one)
 */
function sparkling_header_menu() {
  // display the WordPress Custom Menu if available
  wp_nav_menu(array(
    'menu'              => 'primary',
    'theme_location'    => 'primary',
    'depth'             => 6,
    'container'         => 'div',
    'container_class'   => 'collapse navbar-collapse navbar-ex1-collapse',
    'menu_class'        => 'nav navbar-nav',
    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
    'walker'            => new wp_bootstrap_navwalker()
  ));
} /* end header menu */
endif;

Best Regards,
Movin

danebergman · June 24, 2015, 6:03pm

Hi Movin.

I am doing fantastic thank you. I hope you are well too.

Appreciate your response to my question. I have installed and activated the Child theme and all seems to be working well. The only problem I have is that the sub-menu of the sub-menu is appearing below and is always visible. Is it possible to have it appear to the right when the first sub menu is hovered over?

I think this would be visually more appealing then having a long menu drop down.

Thank you again for your wonderful help. It is much appreciated.

Dane.

danebergman · June 24, 2015, 6:20pm

Also it seems when I make the tiered sub-menu, the items below the second sub-menu do not appear.

EG:
Travel
~~ Europe

~~ Central America
~~~ Guatemala
~~~ El Salvador

etc...

To get an idea of the look I am going for check out the http://www.youngadventuress.com/ and hover over the Destinations menu.

Thanks a million.

Dane

taygooo · June 25, 2015, 7:06am

I agree. I’m having this problem too. I’m also unable to click on certain items.

For example:

Tutorials
*HowToRead
**Lesson1
**Lesson2
*HowToWrite
**Lesson3
**Lesson4

I would be unable to click on Lesson1 or Lesson2 because HowToWrite pops up.

Any fix for this would be super appreciated!

movin · June 25, 2015, 5:15pm

Hi Dane,

The only problem I have is that the sub-menu of the sub-menu is appearing below and is always visible. Is it possible to have it appear to the right when the first sub menu is hovered over?

Also it seems when I make the tiered sub-menu, the items below the second sub-menu do not appear.

It’s working fine for me as shown in the attached screenshot.

Could you please share the URL of your site where you are having this issue so that i can troubleshoot it?

Regards,
Movin

movin · June 25, 2015, 5:17pm

Hi @taygooo,

Sorry to hear the problem you are having.

Could you please share the URL of your site where you are having this issue so that i can troubleshoot it?

Thanks,
Movin

taygooo · June 25, 2015, 6:44pm

Thanks for the quick reply!

Here’s the url: http://www.musicproductionsource.com/

The ‘tutorials’ tab is having the problem where there is more than 1 tier. Whereas the “About this site” tab is working fine.

danebergman · June 25, 2015, 8:31pm

Thanks for the reply again Movin. Your attached screen shot is what I am going for and also the link I posted as well. My website is www.thelifestyleempire.com and the travel menu is the one I have put a sub menu under.

Let me know if there is anything I can do and also if you would
Like to access back office to make things easier.

Thanks.

Dane

movin · June 26, 2015, 2:44pm

Hi there,

Thank you for sharing your site URLs.

I have troubleshooted the issue on your site and found the CSS selector “#menu-header-menu” that i had used in the shared style.css file of child theme was menu specific and it depends on menu name therefore it was working on my site but nor yours.

I have changed the CSS selector from “#menu-header-menu” to “.navbar .nav.navbar-nav” in my previously shared CSS code which will work fine now.

Could you please try using the updated CSS code and let me know how it works for you?

Regards,
Movin

movin · June 26, 2015, 2:46pm

Hi Dane,

On your site i have found that you are using the following custom CSS code which is causing the sub menus to always display and not after hovering the parent menu so please try removing this custom code to make the menus work fine.

@media (min-width: 979px) {
  ul.nav li.dropdown:hover ul.dropdown-menu {
    display: block;
  }

Cheers,
Movin

danebergman · June 26, 2015, 3:51pm

Hi Movin.

How do I go about using the new CSS code? Do I just replace “#menu-header-menu” with “.navbar .nav.navbar-nav” in the Style.css folder of the child theme? Or do I need to upload the shared child theme again?

I have removed the custom CSS but now all I can see is the sub menus and not the secondary sub-menus. Also now the I have to click on the top menu for it to drop down, is it possible to still have it be a hover menu.

Thanks again for all your help,

Dane.

taygooo · June 26, 2015, 5:18pm

Thank you so much!

This works perfectly now. I can’t wait to start to set more things up.

fill · June 26, 2015, 9:45pm

Thanks Movin! I’ve been working on similar for a while. Your method works great!

danebergman · June 27, 2015, 12:27pm

Hi Taygooo,

What did you do to replace the “#menu-header-menu” with “.navbar .nav.navbar-nav”?

I’m a bit confused as to whether I need to reinstall the new child theme again or just rewrite the Style.css code.

Thanks mate.

Dane.

taygooo · June 27, 2015, 4:48pm

Hey Dane!

I’m not sure where “#menu-header-menu” is, so I’m assuming I just replaced it like you said.

This is what my style.css looks like for the child theme:

/*
Theme Name: Sparkling Child
Theme URI: https://colorlib.com/wp/themes/sparkling
Author: Colorlib
Author URI: https://colorlib.com/
Description: Sparkling is a clean minimal and responsive WordPress theme well suited for travel, health, business, finance, design, art, personal and any other creative websites and blogs. Developed using Bootstrap 3 that makes it mobile and tablets friendly. Theme comes with full-screen slider, social icon integration, author bio, popular posts widget and improved category widget. Sparkling incorporates latest web standards such as HTML5 and CSS3 and is SEO friendly thanks to its clean structure and codebase. It has dozens of Theme Options to change theme layout, colors, fonts, slider settings and much more. Theme is also translation and multilingual ready and is available in Spanish. Sparkling is a free WordPress theme with premium functionality and design.
Version: 2.0.0
Template: sparkling
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sparkling
Domain Path: /languages/
Tags: green, light, white, gray, black, one-column, two-columns, right-sidebar, fluid-layout, responsive-layout, photoblogging, left-sidebar, translation-ready, custom-background, custom-colors, custom-menu, featured-images, full-width-template, post-formats, theme-options, threaded-comments

This theme, like WordPress, is licensed under the GPL.

*/

.navbar .nav.navbar-nav ul ul {
top: 0;
left: 100%;
padding: 0;
margin: 0;
}

so I’m assuming you just copy and paste the .navbar code he gave us. Sorry if it’s unclear, I’m not super experienced with these things.

danebergman · June 27, 2015, 10:19pm

Thanks for the reply Taygooo.

I replaced the style.css code with .navbar .nav.navbar-nav but it doesn’t seem to have done anything, and I can only see the the first sub-menus now. The second sub-menus are not showing up at all now.

Also my Style.css folder only contained the following:

/*
Theme Name: Child Theme
Template: sparkling
*/

.navbar .nav.navbar-nav ul ul {
top: 0;
left: 100%;
padding: 0;
margin: 0;
}

Which is different to yours but I’m guessing should be the same as we used the same zip file.

I will have to wait for Movin to take another look as I as unsure of what to do from here.

Thnaks again.

taygooo · June 27, 2015, 10:56pm

Hmm. That’s weird.

I also have this for my custom css:

.widget_nav_menu ul li {
border: none;
margin-bottom: 10px;
margin-top: 10px;
padding-bottom: 0;
}
.widget_nav_menu ul {
margin-bottom: 5px;
margin-top: 5px
}
.widget_nav_menu ul ul {
padding: 0 10px;
}

I’m not sure if that matters, but I found it from some thread on this site.

Goodluck with it though!

movin · June 29, 2015, 11:19am

Hi Dane,

I checked your site and found you have used the modified CSS correctly on your site but due to some CSS conflict the sub menus on your site is not working so could you please also add the following CSS code in the style.css file of your child theme to make it work?

.navbar .nav.navbar-nav li:hover > .dropdown-menu {
  display: block;
}

Best Regards,
Movin

danebergman · June 29, 2015, 2:37pm

Worked like a charm Absolute champion Movin.Thank you so much for your help with everything.

Appreciate it a lot.

Cheers Dane.