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.

 

Menu
Example of how main menu behaves on CERN Theme

 

 

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:

  1. Install and enable the Block class module
  2. Visit the block in the block layout settings
  3. At the bottom of the page add without-shadow in CSS class(es) setting
  4. 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:

  1. Create a Menu in /admin/structure/menu

  2. Add the menu items in the menu

  3. 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.

  4. Done!

 

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

 

Menu on footer