CERN main menu - can't display all items

Hi,

I’m working on https://alien-d8.web.cern.ch/content/documentation/howto/site/installlcgvobox and I cannot get 5th level children to display in the menu. It shows the ‘+’ but it’s unclickable/unexpandable:

D7 version for correct view:


(D7 link: https://alien.web.cern.ch/content/documentation/howto/site/installlcgvobox )

I’ve looked at
Menus in D8 CERN default theme which also mentions:
" As you have already noticed the normal CERN Menu does not support 3rd level menu items, so it’s not a bug. However, it is an issue that is already scheduled to be fixed and we plan to implement it and deploy it in one of the next theme versions."

… and I’ve also changed the CDN thingy to < none > as per: Dropdown menus not working at all on CERN Theme

However it’s still not working.

Note that this site needs to match exactly the D7 version (cern.ch/alien) in to ensure zero disruption, so there’s not a lot of wiggle-room with changing theme or layouts…

Thanks in advance for your advice!
-cath

Hey Cath,

It is not a configuration issue, it is a theming issue. Fortunately though it is already solved in version 2.6.0 of theme, which is the next theme version to be deployed.

I took the initiative to clone your website in one of my test ones to see how it will look like in this version and the result is the following.

I didn’t apply any configuration change, just changed the theme version to the next one. If you are in a hurry to deploy the website and cannot wait for that version, then you can install the Release Candidate branch in your theme.

Let me know if that works for you

Konstantinos

Oh! Great that’s been resolved - and actually that menu looks a lot nicer as well (IMHO)…

I’m having trouble downloading and installing the RC branch. Possibly doing it wrong, but I’m using https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cernbase/tree/rc-v2.6.0 and tried to download/upload to my website like I’m installing a new theme. However it doesn’t appear in list of themes (have tried 3 times now). What am I doing wrong?

Thanks,
-cath

Actually there are 2 themes: CERN Base and CERN Theme which you should clone to v2.6.0

Try the following:

$ git clone --single-branch --branch rc-v2.6.0 https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cernbase.git
$ git clone --single-branch --branch rc-v2.6.0 https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cern.git

Konstantinos

I did it via the usual Drupal visual interface/install new theme zone, as I’m (still) not familiar with the codey method… :slight_smile:

However it seems to have worked for that menu, and I’m happy about that…looks good.

Unfortunately I’ve now lost the main menu on the top of the site! It thinks I’m on a small screen device, no matter which browser I use, and clicking the hamburger does nothing…

Its the aggregate JS issue that I need to fix. The expanding is JS and since the files are not loaded properly it does not work. If you disable JS aggregation it will back to normal.

Mmmh, it’s still not happy.

It’s still showing the hamburger:

And when you click it, it gives:

Should I just step away from this for a while?! :upside_down_face:

My mistake I didn’t understand what you meant. The burger menu will appear to all monitors where width < 1280px. Not sure about the resolution of your screen. Can you please download again the latest version of the Release Candidate of the CERN theme since I applied a change? (only the CERN theme, not the CERN Base)

It’s still not working - it still thinks I’m on a smaller screen. Tried Safari, Chrome and Firefox, same result.

My screen size is this:
38

I got the tar.gz file from https://gitlab.cern.ch/web-team/drupal/public/d8/themes/cern/tree/rc-v2.6.0 - I can see the changes you made so figured I was in the right place.

However something, somewhere, is still not reading it on my alien-d8 site…

I believe the “issue” is that because of the Retina screen the pixel ratio is (2:1) in macbooks, meaning that each pixel is actually 2 physical pixels. As a result the browser reads it as half its pixels (~ 1250). https://medium.com/@micjamking/hd-retina-display-media-queries-b5562b5430d6. This can be fixed be fixed by applying pixel-ration selectors in the styling.

Either way good that you mention it so that I will also apply the ration selectors on top of the width selectors.

Hello again Cath,

I found and resolved the issue of the JS aggregation. It will be deployed in v2.6.0 of CERN theme.

Konstantinos