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.
<nav class="navbar navbar-light flex-column p-4 border-bottom bg-white sm:flex-row">
{{#link 'help_center' class='navbar-brand mr-auto'}}
<img class="block img-fluid z-100" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{~#if settings.tagline}}
<span class="navbar-tagline mx-3 white-space-no-wrap lg:font-size-lg">
{{~#if settings.use_translations}}
{{dc settings.tagline}}
{{else}}
{{settings.tagline}}
{{/if~}}
</span>
{{/if~}}
{{/link}}
<div class="nav flex-column justify-content-center text-center font-size-md sm:flex-row">
{{#if help_center.community_enabled}}
{{link 'community' class='nav-link'}}
{{/if}}
{{link 'new_request' class='nav-link'}}
</div>
</nav><nav class="navbar navbar-light flex-column p-4 border-bottom bg-gray-800 sm:flex-row">
{{#link 'help_center' class='navbar-brand mr-auto'}}
<img class="block img-fluid z-100" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{~#if settings.tagline}}
<span class="navbar-tagline mx-3 white-space-no-wrap lg:font-size-lg">
{{~#if settings.use_translations}}
{{dc settings.tagline}}
{{else}}
{{settings.tagline}}
{{/if~}}
</span>
{{/if~}}
{{/link}}
<div class="nav flex-column justify-content-center text-center font-size-md sm:flex-row">
{{#if help_center.community_enabled}}
{{link 'community' class='nav-link'}}
{{/if}}
{{link 'new_request' class='nav-link'}}
</div>
</nav>The background color and link color of navbar in the page header of our themes is defined in theme settings. Light and dark navbars are useful for use elsewhere in the help center, for example on Contributions page.
You can apply your own colors to navbar elements and navbar links using utilities like .text-gray-600 and .hover:text-gray-700.
Toggle
Use .navbar-toggle to display an animated, hamburger-style menu toggle on small screen sizes.
<button class="navbar-toggle ml-2 {{settings.nav_breakpoint}}:hidden">
<span></span>
<span class="sr-only">{{t 'toggle_navigation'}}</span>
</button>Brand
Use .navbar-brand on the link containing your logo to ensure that it inherits the appropriate color scheme. The color is inherited by the optional tagline, which is configurable through theme settings, as well as the logo itself if you chose to use an inline SVG with the .fill-current utility.
{{#link 'help_center' class='navbar-brand mr-auto'}}
<img class="block img-fluid z-100" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{~#if settings.tagline}}
<span class="navbar-tagline mx-3 white-space-no-wrap lg:font-size-lg">
{{~#if settings.use_translations}}
{{dc settings.tagline}}
{{else}}
{{settings.tagline}}
{{/if~}}
</span>
{{/if~}}
{{/link}}
{{#link 'help_center' class='navbar-brand mr-auto'}}
<img class="block img-fluid z-100" id="logo" src="{{settings.logo}}" alt="{{t 'home_page' name=help_center.name}}">
{{~#if settings.tagline}}
<span class="navbar-tagline badge mx-3 white-space-no-wrap">
{{~#if settings.use_translations}}
{{dc settings.tagline}}
{{else}}
{{settings.tagline}}
{{/if~}}
</span>
{{/if~}}
{{/link}}The tagline can be given a different look-and-feel using utilities or elements, like the badge style used in the example above.
Menu
Use .menu on a .nav element to create a responsive menu.
Our themes allow you to define when the menu changes from a collapsible mobile menu to a standard navbar menu and what style the mobile menu has. The two built-in options are standard (where the menu fades in and out) and slide-in (where the menu slides in from the left-hand side of the screen).