Monitor Reply

Support

Click on Top Level Menu Only Fires Dropdown and Not the Link

Permalink Browser Info Environment May 13, 2018 at 9:21 PM

I am having an issue with the menu system of this theme. When there are links that have child pages (dropdown), the dropdown menu does not fire on hover, but only on a click. When you click the top level link, you only get the dropdown menu and can no longer get to the page. I am on a Windows 10 computer with touchscreen, using Chrome. Also tested in Firefox and Edge and have the same issue. Once a menu item has a dropdown item, you can no longer get to that page by clicking, it only fires the dropdown menu.

Beta Site:https://www.btlaunch.com/elm/index.php/...

Type:	Ticket
Status:	Archived

pilipala replied on May 14, 2018 at 10:09 am Permalink Reply

Hi

This theme uses a Bootstrap menu, which has this behaviour by default, and this is to make it more accessible for mobile and touch devices.

The Achillea documentation explains the menu on page 5. You can find the documentation in your theme folder, and also online:

https://www.concrete5.org/marketplace/themes/achillea/documentation/...

We would recommend keeping the default Bootstrap menu style, but if you need to have the top link of a dropdown "clickable" then you will need to customise the theme, or switch to a different theme.

If you search on the internet for "bootstrap parent link navigable" you will find there are various tips on customising the Bootstrap menu, such as here:

https://stackoverflow.com/questions/19935480/bootstrap-3-how-to-make...

https://github.com/mrhanlon/twbs-dropdown-doubletap/blob/master/js/d...

For example, you could add this javascript to your footer.php before the </body> tag, which would make the parent link "clickable":

<script>
$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
$(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );

Viewing 15 lines of 17 lines. View entire code block.

 
<script>
$('li.dropdown').on('click', function() {
    var $el = $(this);
    if ($el.hasClass('open')) {
        var $a = $el.children('a.dropdown-toggle');
        if ($a.length && $a.attr('href')) {
            location.href = $a.attr('href');
        }
    }
});
$(function() {
        $(".dropdown").hover(
            function(){ $(this).addClass('open') },
            function(){ $(this).removeClass('open') }
        );
});
</script>

Thanks,

Jennifer

darrellgw replied on May 14, 2018 at 1:30 pm Permalink Reply

Thanks Jennifer, I did ad the code block that you provided to the end of the footer.php page, and that made the top level menu operate correctly. However, now the sub menus cannot be accessed. When I hover then try to move my cursor to the sub-menu, it disappears before you can actually get there. The only way is to move your mouse as fast as possible and sometime
you get lucky and get on the sub menu. Is there a timing setting that can be extended so they don't disappear so quickly? Please advise. Thank you.

pilipala replied on May 14, 2018 at 6:21 pm Permalink Reply

Hi,

You will probably need to customise the CSS if you wish to change the behaviour of the default menu that comes with this theme.

While logged into your site, click on the cog icon (top left of the dashboard) > Design > Customise. Then scroll down to the bottom on the left panel until you see "Custom CSS". Click on the cog icon next to Custom CSS, add your own CSS and click save.

For example, if you adjust the position of the dropdown, I think it may work better for you. The code below provides the CSS that you would use to adjust the position, but you may need to change the position to suit.

div.ccm-page #achillea-main-nav .dropdown-menu {
    top: 66px;
}

We don't provide support for theme customisations, so you may want to test this in different browsers and devices, and adjust the CSS to get the effect that you want.

Thanks,

Jennifer

darrellgw replied on May 14, 2018 at 7:18 pm Permalink Reply

Yes, that worked quite nicely. Thank you for your quick responses!

pilipala replied on May 15, 2018 at 4:57 pm Permalink Reply

Great, thank you for letting us know :)

ConcreteCMS replied on May 30, 2018 at 12:03 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

ConcreteCMS replied on May 30, 2018 at 12:04 am Permalink Reply

Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.

To re-open this issue, reply to this message.

Achillea

Support

Click on Top Level Menu Only Fires Dropdown and Not the Link

Issue Reply

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

Request Refund

Code

Delete Post