CivicTheme
  • Docs
  • Changelog
  • Getting started
    • Introduction
    • Installation
    • Getting help
    • Security policy
    • Partnerships
  • Installation
    • Drupal theme
  • Contributing
    • Contribution model
    • Contribution basics
    • Small contribution spec
    • Medium contribution spec
    • Major (RFC-level) contribution spec
    • Code of conduct
    • Figma contributions
  • Components
    • Component list
  • Content Authoring
    • Overview
    • Global settings
      • Favicon
      • Header
        • Site slogan
        • Header logos
        • Primary navigation
        • Secondary navigation
      • Banner
      • Search
      • Link
      • Skip link
      • Side navigation
      • Signup
      • Footer
        • Footer logo
        • Social links
        • Footer navigation
        • Acknowledgement of Country
        • Copyright
      • Colours
    • Content types
      • Page
        • Configure the banner
      • Event
      • Alert
    • Content components
      • Accordion
      • Automated list
      • Attachment
      • Callout
      • Campaign
      • Content
        • Quote
      • iFrame
      • Manual List
        • Event card
        • Event reference card
        • Navigation card
        • Navigation reference card
        • Promo card
        • Promo reference card
        • Publication card
        • Service card
        • Subject card
        • Subject reference card
        • Snippet
      • Map
      • Next step
      • Promo
      • Slider
      • Webform
    • Vocabularies
      • Topics
      • Site sections
    • User accounts & roles
Powered by GitBook
On this page
  • Creating menu links
  • Ordering menu links
  • Enabling menu links
  • Configuring the menu style
  • Editing menu settings from the node (page) itself

Was this helpful?

Edit on GitHub
Export as PDF
  1. Content Authoring
  2. Global settings
  3. Header

Primary navigation

PreviousHeader logosNextSecondary navigation

Last updated 4 months ago

Was this helpful?

The Primary navigation is the main navigation for your website. It appears at the top of the page on the desktop below the Secondary navigation.

Creating menu links

How your roles and permissions have been configured will determine who can access and configure the menus. If your roles and permissions are out of the box, then only the Site Administrator (and Administrator) can edit the menus.

The instructions below presume the tech team have already created a Primary navigation, even if there are no menu items in it.

  1. Go to Structure > Menus > Primary navigation /admin/structure/menu

  2. Find the Primary navigation and select Edit menu

  3. If there are no menu links present, select the + Add link button to add your first Menu link.

  4. Continue to add menu links

    1. Each new link will be added to the top of the menu and have a default weight of 0.

    2. From there you need to place the link in the correct order.

Ordering menu links

It's recommended to order the menu links as you create them, especially if you have a large menu.

There are two ways to order your menu links:

  1. Use the handles to drag the links around to reorder

  2. Using row weights to set the weight.

Use handles

Simply grab the handle and drag to the required position. Nest child menu links below the appropriate parent link.

Use row weights

Click Show row weights to change from handles to weights. Open the dropdown to show the weight.

  • The lower the weight (e.g. -10) the higher the link will appear in the menu

  • The higher the weight (e.g. 10) the lower the link will display in the menu.

Weights are also applied to child menu links.

Enabling menu links

To show a menu link item in the navigation the Enabled checkbox must be filled.

If you want to hide the link from the menu, uncheck the box. If you hide a menu link, any child menu links will also be hidden from the menu.

Configuring the menu style

CivicTheme has three menu styles:

  • None

  • Dropdown

  • Drawer

Note: at the time of writing, the styles None and Dropdown are broken. Examples will be added when these are fixed.

To configure the menu style:

  1. Go to the Primary navigation setting at /admin/appearance/settings/[site-name]

  2. Scroll down and click to open Navigation

  3. In the Dropdown type select the desired style

  4. Save the configuration

Drawer

Editing menu settings from the node (page) itself

You can also access menu settings for an individual page from the page itself.

  1. Go to the page in question, and enter edit mode

  2. On the right side of the edit interface click to open Menu settings

  3. Add a Menu link. This is the link that will display in the navigation. If possible, it should match the page title. If the page title is very long you may consider shortening the Menu link.

  4. Add a description if desired. The description displays when a user hovers over the Menu link.

  5. Select the Parent link by opening the dropdown. If the menu is very large it can be challenging to find the right parent, and it might be easier to do this part in the Primary navigation settings as above.

  6. Assign a weight. Again, if the menu is large it might be easier to go to the Primary navigation settings and use the handles to drag it to the right position or view the row weights for the entire menu to know which weight to assign.

Add menu links, use handles to reorder menu links or click Show row weights
Use row weights to reorder menu links
Select the weight in the dropdown
Drawer style menu displaying child menu links. Note: news & events has no child menu links.
In page menu link settings screenshot