WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Menu dropdown on hover and all parents link (23 posts)

  1. bnock21
    Member
    Posted 7 months ago #

    Is there a way to cause the parent links of the menu to drop down when hovered over and link to their pages when clicked? I understand why Customizr is set up this way (to be usable on smartphones and tablets) but for what I'm doing, I need it to work on hover.

  2. rdellconsulting
    Member
    Posted 7 months ago #

  3. pdwalker
    Member
    Posted 7 months ago #

    No, that solution doesn't work.

    It makes the top level menu items clickable, but the menu's won't appear.

    Can anyone suggest how to make the menu's appear on hover, and that first one to remain clickable?

    Much appreciated.

  4. pdwalker
    Member
    Posted 7 months ago #

    partial solution here: http://wordpress.org/support/topic/navigation-menu-fade-out. This makes the top level menus appear on hover.

  5. pdwalker
    Member
    Posted 7 months ago #

    And this made the top level menu items clickable while still having the dropdowns show up: http://wordpress.org/support/topic/main-menu-not-clickable

    Suggestion: make a child theme to save all your changes. Only two files are necessary in your child theme directory:

    1. ./styles.css
    2. ./parts/class-header-nav_walker.php

    https://managewp.com/how-to-create-a-child-theme

    Problem solved.

  6. acub
    Member
    Posted 7 months ago #

    Put this into your child theme's style.css or into cutomizr style.css. Do not put it in Custom CSS textarea under Appearance-->Customiz'it!, as it will strip the ">" and it won't work!

    ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; }
    ul.nav li.dropdown > ul.dropdown-menu {top: 96%; padding-top: 10px;}

    Install Real Time Find and Replace plugin. Under Tools->Real Time Find and Replace, replace

    data-toggle="dropdown" data-target="#"

    with a single space character. The text to be replaced should also have a single space character before it. No regex. No mods to parent theme files needed. Should work.

    As a result, it might get a bit tricky when on narrow layout, because the submenus will appear and dissapear on hover. That's the reason why the children are only displayed on parent click in the first place. It's a trade-off. A bit better on computer, much worse on smartphone. :)

  7. pdwalker
    Member
    Posted 7 months ago #

    That looks easier.

    I'll play with that.

    Thanks for the advice acub.

  8. ElectricFeet
    Member
    Posted 7 months ago #

    The code
    ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; }
    needs to have the extra margin declaration in there:
    ul.nav li.dropdown:hover > ul.dropdown-menu{ display: block; margin: 0;}
    The reason is that if you don't have it then moving the mouse slowly down towards the submenu makes it collapse again as you hover over the margin. If the margin is 0 then this cannot happen.

    @acub Compare your site with mine and you'll see what I mean. You need to move slowly (as many users do, especially on trackpads) to see the effect.

  9. acub
    Member
    Posted 7 months ago #

    I thought I took care of that with the

    top: 96%;

    declaration. I'm not losing the .dropdown-menu on my website, in any browser, and I don't use margin:0 on .dropdown-menu, no matter how slowly I move on those pixels. Are you losing it?

    But, imho, this is a minor issue, it's just that I don't like the dropdown to overlap .navbar-inner, which is visible on my site, unlike on yours.

    You are right in principle.

  10. bnock21
    Member
    Posted 7 months ago #

    @acub
    IDK what I did wrong because it's not working for me, but I also don't understand what you mean by "a single space character". Also, is this data-toggle="dropdown" data-target="#" all supposed to be in the Find box? Or am I supposed to find data-toggle="dropdown" & replace with data-target="#"?

  11. acub
    Member
    Posted 7 months ago #

    @bnock:
    You actually want to strip the data-toggle="dropdown" and data-target="#" declarations from the page. So you need to find and replace them with a space. Those declarations are making the parent anchors not go where they're supposed to, but instead to "#" (dead links). By removing them you keep the elements in the menu with their original links.

    You could replace them one by one, with two sepparate replaces, but I noticed they're always together, in that order, so you may strip them in only one replace.

  12. bnock21
    Member
    Posted 7 months ago #

    Ok now I'm real confused because I had it the way you said (both in the Find box) and it didn't work. But I put data-toggle="dropdown" in the Find box & data-target="#" in the Replace box and it's working.

  13. bnock21
    Member
    Posted 7 months ago #

    Thanks

  14. acub
    Member
    Posted 7 months ago #

    @bnock: do not replace data-toggle="dropdown" with data-target="#".

    data-toggle="dropdown" - tells the browser to open the submenu on click (we don't need that, since it's opening on mouse-over)

    data-target="#" - replaces the link on the parent element with # (dead link, just scrolls the page to top) (we don't want that, we want to keep the original link of the parent).

    Now, the best way to make sure you are replacing both of the above with nothing (" " = one single space character) is to:
    a) disable/delete any replace you might have right now regarding this issue,
    b) go in your page source and find the declarations above. They should be one after the other.
    c) Copy the declarations as they are in the source,
    d) paste it in the left window and
    e) input a space in the right window.

    Right now the links on your parent elements are dead, if you replaced what you said above.

  15. ImTheirWebGuy
    Member
    Posted 7 months ago #

    Hey all, great thread, which led me to my solution. I noticed I was having issues with mobile after pdwalker and acub's solutions above, so I edited header-nav_walker.php to use WordPress's built-in mobile check, and serve up one or the other:

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
          $item_html = '';
          parent::start_el( $item_html, $item, $depth, $args);
    
          if ( $item->is_dropdown && ( $depth === 0)) {
          	// Enable top level links on desktop, disable on mobile
          	if ( wp_is_mobile() ) {
            $item_html = str_replace( '<a' , '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"' , $item_html);
            $item_html = str_replace( '</a>' , ' <b class="caret"></b></a>' , $item_html);
    				} else {
            $item_html = str_replace( '<a' , '<a class="dropdown-toggle"' , $item_html);
            $item_html = str_replace( '</a>' , ' <b class="caret"></b></a>' , $item_html);
          	}
          }
          elseif (stristr( $item_html, 'li class="divider' )) {
            $item_html = preg_replace( '/<a[^>]*>.*?<\/a>/iU' , '' , $item_html);
          }
          elseif (stristr( $item_html, 'li class="nav-header' )) {
            $item_html = preg_replace( '/<a[^>]*>(.*)<\/a>/iU' , '$1' , $item_html);
          }
  16. catcher10lp
    Member
    Posted 7 months ago #

    @imtheirwebguy (or somone other who can explain)

    is your solution for the css-box or do I need to put it somewhere in the theme-file?

    thanks :)

  17. ElectricFeet
    Member
    Posted 7 months ago #

    What do you want to do? Just dropdown on hover, or make the parents clickable? The first requires simple CSS that you can put in the Custom CSS panel. The second requires php (and will be useless on phones and tablets anyway.

  18. catcher10lp
    Member
    Posted 7 months ago #

    I talked about the 2nd one... where do I have to put the php code? (sorry but I'm a noob :/ )

  19. acub
    Member
    Posted 7 months ago #

    Read his post again.

    ... so I edited header-nav_walker.php to ...

  20. catcher10lp
    Member
    Posted 6 months ago #

    I just put the code in the correct .php file but now I have an error:
    Fatal error: Cannot redeclare TC_nav_walker::start_el() in /home/a2860904/public_html/wp-content/themes/customizr/parts/class-header-nav_walker.php on line 116

    What do I have to do?

  21. acub
    Member
    Posted 6 months ago #

    You need to copy class-header-nav_walker.php in your child theme (replicating the same folder structure! - if you copy it in your functions.php you'll get the same error again!) and modify (practically replace) the function start_el() with the code above, not add it. The error you posted is php's way of saying: "Can't have same function declared more than once, mate. Give it another name or delete one version."

    You already have the same function declared earlier, probably in the same file. Or in functions.php of your child theme, if that's where you pasted the code.

    In order to shed a little light on WP's logic regarding child themes: whenever it needs a file from the theme, WP first searches in the child theme. If the file's not there, it gets fed from parent. So, whenever you want to modify anything from the parent, copy the file to the same folder in your child theme and hack it away. This rule doesn't apply to functions.php and style.css though.

    Also, beware that when the parent gets updated, sometimes the files you copied to your child theme have been modified and you can't benefit from the mods unless you copy again the original from the parent and make the mods once more (saving in your child theme).

  22. catcher10lp
    Member
    Posted 6 months ago #

    Thanks to acub for helping me :)
    I just replaced the function start_el code in the header-nav_walker.php with the code above and put it into my child theme in: themes/Customizrchild/parts
    ...but it still doesn't work.
    Has someone already tested the code if its work or does someone has an idea what I'm doing wrong :/
    If it helps: http://immanuelinternationalev.comlu.com/ is my site :)

  23. acub
    Member
    Posted 6 months ago #

    Took me all day, but I've come up with a solution for this.
    NOTE: this new solution is incompatible with the find&replace one posted above. Make sure you delete the replacement rule from RTFR plugin first.
    Also, you need to delete class-header-nav_walker.php from child theme and only leave the original in parent theme.

    My advice is to eliminate all other styling you've done for menu and reaply it (if necessary) after you activate the the filter function.

Reply

You must log in to post.

About this Theme

About this Topic