The navbar is the main navigation system for Amara. It's split up into several parts:
.navbar-primary: Primary navbar, displayed on the top. We use this for links that are always displayed. This further divides into:
.navbar-primaryLinks: List of links to different sections of the site (homepage, amara public workspace, AOD dashboard) etc. This also contains the language selector.navbar-user: List of user items. Contains either the create account / signin buttons, or the user menu. Also contains the search videos button.navbar-secondary: Secondary navbar (optional), displayed underneath the primary one. We use this to display links for the current area, for example the marketing area, or a team area. This further dives into:
.navbar-secondaryLogo: Logo image/text that identifies what area you're in. For example the amara wordmark or a team logo.navbar-secondaryLinks: List of links to navigate the current areaInside those containers use the following classes to style individual elements:
.navbar-primaryLink: Link in the primary navbar.navbar-primaryLink.logo: Amara logo link in the primary navbar.navbar-secondaryLink: Link in the secondary navbar.navbar-mobileHeader: Nav header for mobile devicesNote that the #page-header class makes it so the example is positioned in the header section at the top of this page
{% load assets %}
<header id="page-header" class="nav-down">
<nav class="navbar">
<div class="navbar-mobileHeader">
<div class="navbar-mobileHeaderLogo"><a href="#"><img src="{% asset "img/amara_wordmark_plum.svg" %}" alt="Amara Logo"></a></div>
<button id="simply-burger" type="button" title="button" class="navbar-mobileHeaderButton menuToggle" data-target="#main-nav" onclick="toggleMenu()">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div id="main-nav">
<div class="navbar-container primary">
<div class="navbar-primary">
<ul class="navbar-primaryLinks">
<li><a class="navbar-primaryLink logo" href="#"><img src="{% asset "img/amara-logo-small.svg" %}"></a></li>
<li><a class="navbar-primaryLink" href="#">Amara Public Workspace</a></li>
<li><a class="navbar-primaryLink" href="#">Team Workspace</a></li>
<li><a class="navbar-primaryLink" href="#">AOD Dashboard</a></li>
</ul>
<ul class="navbar-user">
<li><a class="navbar-primaryLink lime" href="#">Sign up for free</a></li>
<li><a class="navbar-primaryLink" href="#">Login</a></li>
</ul>
</div>
</div>
<div class="navbar-container secondary">
<div class="navbar-secondary">
<div class="navbar-secondaryLogo"><a href="#" tabindex="0"><img src="{% asset "img/amara_wordmark_plum.svg" %}" alt="Amara Logo"></a></div>
<ul class="navbar-secondaryLinks">
<li><a class="navbar-secondaryLink" href="#">Subtitling Platform</a></li>
<li><a class="navbar-secondaryLink" href="#">Purchase Subtitles</a></li>
<li><a class="navbar-secondaryLink" href="#">About</a></li>
<li><a class="navbar-secondaryLink" href="#">Volunteer</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>