incorrect menu classes

  • Resolved fastfasterfastest

    (@fastfasterfastest)


    7 years, 8 months ago

    The menu (css) classes are in some circumstances generated inconsistently/incorrectly.

    Assume you have a menu item with a “Navigation Label” with a space, e.g. “Fast Faster”.

    If you specify the theme option Menu Settings/Mobile Menu Options/Submenu items collapse until opened as Off then the menu item’s css class will be menu-fast-faster – notice how the space in the “Navigation Label” is replaced with a dash. (The menu item also get other css classes, e.g. menu-item-14.)

    However, if you specify the theme option Menu Settings/Mobile Menu Options/Submenu items collapse until opened as On then the menu item’s css class will be menu-fastfaster – notice how the space in the “Navigation Label” is removed rather than replaced with a dash.

    This causes problems if you want to target the menu item using the menu class – the menu item in the mobile menu will be different than the menu item in the regular menu.

    A likely cause is the class kadence_mobile_walker and its start_lvl method. It seemingly uses a different method to generate the css class from the “Navigation Label” than what wp_nav_menu uses. The start_lvl method uses sanitize_key, perhaps it should use sanitize_title instead, or some other method.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter fastfasterfastest

    (@fastfasterfastest)

    7 years, 8 months ago

    Should have stated that this affects the mobile menu.

    hannah

    (@hannahritner)

    7 years, 8 months ago

    Hey,
    Can you post a link to your site? I’m having a hard time following…

    Hannah

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    7 years, 8 months ago

    Hi Hannah,
    Sorry cannot provide a link to a live site. Here is how you can easily replicate it:

    1. create a menu
    2. assign it to primary and mobile location
    3. select a page and add it to the menu
    4. edit the menu item added and change its “Navigation Label” to Fast Faster
    5. click “Save Menu”
    6. edit “Theme Options”, set “Menu Settings/Mobile Menu Options/Submenu items collapse until opened” to “On”
    7. click “Save Changes”
    8. edit “Theme Options”, add custom css .menu-fast-faster::before { content: "NEW! "; }
    9. click “Save Changes”

    Then, view the site. Size your browser so the regular menu is visible. Notice how the menu item says “NEW! Fast Faster”. Then, resize your browser so the mobile menu is visible. Notice how the menu item says “Fast Faster” (incorrect, should be “NEW! Fast Faster”.)

    The regular menu’s item has a css class menu-fast-faster. The mobile menu’s item has a css class menu-fastfaster (incorrect, should be menu-fast-faster.)

    hannah

    (@hannahritner)

    7 years, 8 months ago

    Hmmm, I actually think this is intentional. Because the mobile menu is technically a different menu, the classes need to be different. The theme developer is backpacking at the moment, but when he returns I’ll have him confirm this. In the meantime try out this css:
    .menu-fast-faster::before, li.menu-fastfaster::before { content: "NEW! "; }

    Hannah

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    7 years, 8 months ago

    I don’t think it is intentional. The css classes don’t need to be different (and imo should not be different) – if you want/need to target the item in only one of the menus you can use additional css selector(s) for its ancestor element.

    If you set “Menu Settings/Mobile Menu Options/Submenu items collapse until opened” to “Off”, the menu item in the mobile menu the menu item gets the class menu-fast-faster, the same (correct) css class name as the item gets in the regular menu. Thus, a regular menu and a mobile menu with the “same” item with the same css class name.

    Thanks – I know how to avoid and/or work around the issue. I just wanted to report the bug as a courtesy and thank-you for providing this free theme.

    The theme calls wp_nav_menu in header.php, one of the calls causes kadence_mobile_walker to be called and I think the problem is in its start_lvl method as I mention in my original post.

    hannah

    (@hannahritner)

    7 years, 8 months ago

    Thank you for reporting! Again, I will inform the developer when he returns.

    Cheers!

    Hannah

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    7 years, 8 months ago

    👍

    Ben Ritner – Kadence WP

    (@britner)

    7 years, 8 months ago

    I’ve updated this and it’s going to be out with the next release.

    Thread Starter fastfasterfastest

    (@fastfasterfastest)

    7 years, 8 months ago

    Thanks.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘incorrect menu classes’ is closed to new replies.