Blocks and Menus

Menus in the CERN theme are rendered in a different way, based on where they are placed.

Header

In order to add menu items on the header, you should use the Main Navigation menu (You can find it in Structure > Menu > Main Navigation). The header items are rendered using a specific font, size and animation. More specifically, whenever the user hovers over a menu item, an animation is triggered in order to show the current pointer position. In a similar way, when a user is located in a page, the underlined item indicates the current page of the user.

The GIF below shows how the menu behaves while hovering above items and expanding multiple levels.

Second level not rendered

One of the most common mistakes/errors that we receive is when the second level of a menu item is not rendered even though it is added in the menu structure. This can be solved by enabling the "Show as expanded" option of the parent menu item

Sidebar

Menus

Menus placed on sidebar also have specific characteristics:

First level menu items are discretely bigger than the rest
Current page is constantly underlined
When the user hovers over a menu item, the item is underlined
The menu inherits the background colour of the header to make it more visible.

The GIF below presents the aforementioned elements.

Menu placed on a sidebar — Menu placed on the sidebar of CERN Theme

Custom Blocks and Views

When a custom block or a view is placed on a sidebar, it has a shadow border around it so that the borders between the blocks will be discrete.

Blocks without shadows

The shadow around a block can be avoided by adding the class .without-shadow in the block. In order to add a class in a block using the drupal admin interface:

Install and enable the Block class module
Visit the block in the block layout settings
At the bottom of the page add without-shadow in CSS class(es) setting
Done

Borders example — Example of blocks placed in a sidebar with and without borders

Footer

The footer constitutes a branding element of the websites that use the CERN Theme. The elements of the footer region are the CERN Logo, the Copyright text and the 4 regions of the footer. The footer can be used to place quick links in order to help the users navigate to external websites. It can also be used to place links of Social Media. The latter is easily achievable by using the CERN Full HTML text format along with the CERN font.

To create footer menus, you need to follow the steps below:

Create a Menu in /admin/structure/menu
Add the menu items in the menu
Place the menu in one of the 4 footer regions/columns. This can be achieved by visiting /admin/structure/block and click on "Place Block" in region that you want to place it.
Done!

The GIF below shows how menus behave when placed on the footer of a website.

Menu on footer