ISU Navbar

Per the ISU Theme components, this theme includes the black ISU Navbar.

This is the black bar that appears at the top of many ISU websites. The bar contains important links for the university as a whole like the directory and sign-ons. It is recommended that all ISU websites include this menu unmodified.

How to enable/disable

The IASTATE theme comes with this menu active by default. It can be toggled on and off in the theme Settings.

1. From the admin menu > Appearance > Settings > IASTATE Theme
2. Under ISU Theme Settings, check/uncheck 'Show ISU navbar'
3. 'Save configuration'

For Developers

The ISU Navbar has been built to be as modular as possible to make it easy to update and to avoid any conflicts with subthemes or dependences. By default, the IASTATE theme comes with these components already configured and ready to go. This section just provides more details about how it's put together.

Required files for the ISU Navbar:

• css/isu-navbar.css
• js/isu-navbar.js
• template/parts/isu-navbar.html.twig

How to include isu-navbar.html.twig file

isu-navbar.html.twig is a Drupal 8 partial template and is included in templates/layout/page.html.twig

{# The ISU Navbar may be disabled in theme settings #}
{% if isu_navbar %}
  {% include '@iastate_theme/parts/isu-navbar.html.twig' %}
{% endif %}

How to include the css and js files

The required css and js files must be added in the iastate_theme.libraries.yml file.

global-css:
  css:
    theme:
      css/bootstrap/bootstrap-reboot.min.css: {}
      css/bootstrap/bootstrap-grid.min.css: {}
      css/bootstrap/bootstrap.min.css: {}
      css/isu-navbar.css: {}
      css/base.css: {}
      css/layout.css: {}
      css/component.css: {}
      css/isu-social.css: {}

global-js:
  js:
    js/isu-navbar.js: {}
  dependencies: 
    - core/jquery