Dropdown menus not working at all on CERN Theme

Theming
1

Hi,

I am trying to make my menu block show all the links expanded by default, up to the second level. Configuration is (should be) right:

image

But after applying I realized that not only they don’t show expanded, but they neither show when I hover or click the menu items…

I think I never saw this functionality working on the D8 CERN Theme, but I might have a bad configuration on the site. The site is https://test-sectors-drupal8.web.cern.ch in case any Drupal admin wants to take a look :slight_smile:

Can it be related to showing the same block twice on the same page? I noticed that the contextual links also stopped working when I added the menu block for the second time on the page (by placing it on the center column of a section paragraph on a landing page).

PS: In terms of markup, the menu renders every sub-menu with the dropdown-menu class, so at least the server part works. The problem is the CSS coming from the CERN Base and CERN Clean themes, that invariably sets display: none to all the .dropdown-menu elements.

I can fix it with theming, but I guess this functionality should work out of the box. I will post here my CSS/JS solution when I have it.

2

Hello Oscar,

I checked your website and it seems that the menu works. Did you apply any theming/config fix?

3

Hi @kplatis,

yes, they work because my theme implements the functionality from scratch :slight_smile:

But I think the CERN theme should implement it as well (maybe it’s a configuration problem on my side).

We can take a look on the next ENTICE meeting.

Thanks!

4

Hello Oscar,

It took some time but in the end we found what was wrong with the dropdown and/or responsive design.

The CERN theme inherits the bootstrap theme. In order to better control the bootstrap version, we have locked the version so that it won’t get the latest one. The actual issue is that the bootstrap version was loading twice, once from the theme and once from CDN.

22
As you can see in the attachment above there is an option on bootstrap theme settings that enables the CDN provider that gives the latest version. In our websites, we have it set to “-None-” so that it won’t get the latest bootstrap version.

The websites that the dropdown was not working had this set to a CDN provider and as a result it was getting the latest bootstrap version.

Kostas

Credits: @pgroeger for spotting the fact that bootstrap is loading twice.

1 Like
5

Thanks for the finding and explanation!

I will do some tests on my sites and see if I can make it work with my customization.

Regards,

Óscar

6

Hi,

I am having a similar issue. I changed the Menu settings and Bootstrap configuration as described above. The dropdown menus work while I am signed out. As soon as I log in they are not displayed.

Could someone have a look at https://jcop-drupal8.web.cern.ch ?

Thanks in advance.
Ivan.

7

Hello Ivan,

I checked the console errors and there was one about minified JS, so I guessed it is about JS aggregation. For test sites you should disable JS aggregation from admin > config > performance and it is solved

28
Screenshot 2020-02-19 at 11.46.28.png347×560 20.1 KB

Let me know if you find something else.

Konstantinos

8

Thank you Konstantinos! It’s working fine now.

Cheers,
Ivan.

1 Like
9

Hello Ivan,

I found and resolved the issue of the JS aggregation. It will be deployed in v2.6.0 of CERN theme so after it is deployed you can re-enable the JS aggregation.

Konstantinos