[Solved] Main Menu dropdowns issue

[Jones 177]

@Arceus (or as the staff of Witchlight call you: 'smf jesus') You are most likely the one that can help me with this issue. 

 

The SMF theme I am altering for a work in project site is doing a weird thing. When you click on any of the main menu buttons, instead of taking you to that buttons target it shows the dropdown options. They show on hover too. You end up with a dropdown that pops up on click then just sticks around until you click somewhere else and the on hover still works on other dropdowns so you end up with two. I am assuming this has something to do with the way mobile view has no hover to see dropdowns, because the main menu works perfectly on small screens where you have to click the menu item to see the dropdowns. 

 

What I want is to be able to click 'Profile' and go to my profile summary. Or click 'Messages' and go to my inbox. On non-mobile screens I just want the dropdown on hover. I am using Menu Editor Lite and I've checked that the link targets are right. I've included a picture to show the double dropdowns. I was hovering on Messages after having clicked Moderate. I've also included the Index.template.php file's Template_menu function because I know the issue is somewhere in that foreach bit but more code is easily provided just tell me what to show. Thank you in advance for taking a look guys.

 

 

 

function template_menu()
{
    global $context, $settings, $options, $scripturl, $txt;

    echo '
    <ul class="nav nav-tabs border-0 flex-column flex-lg-row">';

    foreach ($context['menu_buttons'] as $act => $button)
    {
        echo '
                <li id="button_', $act, '" class="nav-link button_', $act, (!empty($button['sub_buttons']) ? ' dropdown' : ''), ($button['active_button'] ? ' active' : ''), '">
                
                    <a ', (!empty($button['sub_buttons']) ? ' class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"' : ''), ' href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                    
                    
                         ', $button['title'], (!empty($button['sub_buttons']) ? ' <span class="caret"></span>' : ''), '
                    </a>';
        if (!empty($button['sub_buttons']))
        {
            echo '
                    <ul class="dropdown-menu animated bounceIn">
                        <li>
                            <a class="dropdown-item" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>', $button['title'], '</a>
                        </li>';

            foreach ($button['sub_buttons'] as $childbutton)
            {
                echo '
                        <li', !empty($childbutton['sub_buttons']) ? ' class="dropdown-submenu"' : '', '>
                            <a class="dropdown-item" href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                                ', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '
                            </a>';
                // 3rd level menus 🙂
                if (!empty($childbutton['sub_buttons']))
                {
                    echo '
                            <ul class="dropdown-menu animated bounceIn">';

                    foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                        echo '
                                <li>
                                    <a class="dropdown-item" href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                                        ', $grandchildbutton['title'], '
                                    </a>
                                </li>';

                    echo '
                            </ul>';
                }

                echo '
                        </li>';
            }
                echo '
                    </ul>';
        }
        echo '
                </li>';
    }

    echo '
            </ul>';
}

[Arceus 1,081]

Fair warning, I suck at words right now I may not make 100% sense.

 

Just at a quick guess without seeing the live site, most likely what's going on is the original creator of the theme you're altering put in a certain jQuery code library called superfish, which turns the default SMF menus into touch friendly ones without altering their code at all. Ideally for these, hovering wouldn't work anymore, so you'd have to click to get the menus to drop. Obviously something's going sideways. You can either edit the CSS to get the hover dropping to stop and just use the click dropping, or you can go through the theme's JS and try finding all the superfish stuff. (If you're not feeling brave enough to do that, you can also post everything in your theme.js here and one of us can go through it. It may also be in a different .js file, depending, I don't recognise that theme so I'm not sure where it'd be.) It may also be tied to the bootstrap library, instead (I'm honestly not familiar with most premades anymore, so I can't tell you for sure which it'd be).

 

If you do want it to keep working fine on mobile screens, you'll probably want to do the former, and just make the CSS stop letting it hover-drop. (With these, iirc you just click twice and it'll go where it's supposed to. Or it should.)

[Jones 177]

Thanks so much for answering. I went through all of the js files included with the theme. I don't see any mentions of superfish. There is a js library called Popper that I'm not familiar with, so maybe the issue is in there, its pretty long so I'll have to go over it later. I know vanilla js fairly well I'm not very versed in jquery at all and can only blindly feel my way through php. If seeing the live site will help the link is www.operationbowtruckle.com 

 

At this point I have to assume the issue is in the Popper.js file or in the bootstrap. The theme does rely pretty heavily on the latter. Tomorrow I'll go in and stop it from hovering until I can figure out the issue. Thanks again for the help. And I can't wait to add in another 'folder tab' for the character manager dropdown.  😍  😍 😍 😍

[Arceus 1,081]

Ah, after a quick look, the click event listeners for the menu are referencing bootstrap, so this menu's bootstrap-driven, not superfish. Popper.js is for tooltip- and tooltip-like-object styling.

[Jones 177]

Alright good deal. Now I know where to look. 👍