Sections

Navbars

Navbars allow visitors to navigate your Help Center and are often featured in the page header.

Colors

Use .navbar-light and .navbar-dark for light and dark navbars, respectively.

These classes ensure that .navbar-brand, .navbar-toggle and .nav-link elements adopt colors appropriate to the background color of the .navbar.

Alternatively you can apply your own colors using utilities like .text-gray-700 and .hover:text-base.

Toggle

Use .navbar-toggle to display an animated, hamburger-style menu toggle on small screen sizes.

<button class="navbar-toggle ml-2" data-toggle="collapse" data-target="#toggle-demo">
  <span></span>
</button>
<div class="collapse" id="toggle-demo"></div>

Brand

Use .navbar-brand on the link containing your logo to ensure that it inherits the appropriate color scheme. This is important when using an inline SVG as your logo with the .fill-current utility.

If you choose to use titles or badges alongside your logo, you can align these using flex utilities like .align-items-center.

{{#link 'help_center' class='navbar-brand flex align-items-center mr-auto hover:no-underline'}}
  <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
  <span class="h4 m-2">Support</span>
{{/link}}

{{#link 'help_center' class='navbar-brand flex align-items-center mr-auto hover:no-underline'}}
  <img class="block img-fluid h-6" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
  <span class="badge ml-2">Support</span>
{{/link}}

Use .nav-menu on a .nav element to create a menu for display on small screen sizes. The menu can be shown and hidden using the Collapse plugin.

By default, the menu slides down from the navbar when the menu toggle is clicked.

Two additional styles are available in the _nav-menus.scss Sass partial:

  1. An off-canvas menu which slides in from the left-hand side of the screen
  2. A full-screen menu which scales into view