<!-- We display these in reverse so that the interfaceIcons
     are always on the right, even if the other stuff is hidden -->
<div id="interfaceIcons">
  <img id="helpButton" class="headerButton" title="Show information about the interface" src="../../../images/info.svg" />
  <!--img id="achievementsButton" class="headerButton" src="../../../images/achievements.svg" /-->
  <img id="hamburgerButton" class="headerButton" title="Main Menu" src="../../../images/hamburger.svg" />
</div>

<div id="projectHeader">
  <img id="projectVisibilityButton" class="headerButton" title="See/change who can see the project you\'re working on"/>
  <span contentEditable="true" id="projectName" max-width="30em" title="Rename this project"/>
  <div id="projectIcons"></div>
</div>

<div id="brandingIcons">
  <img id="aboutResLabHeaderButton" class="headerButton" title="About Resonant Laboratory" src="../../../images/Resonant_Lab_cropped_white.svg"/>
</div>

<!-- We display these in reverse so that the interfaceIcons
     are always on the right, even if the other stuff is hidden -->
<div id="interfaceIcons">
  <img id="helpButton" class="headerButton" title="Show information about the interface" src="../../../images/info.svg" />
  <!--img id="achievementsButton" class="headerButton" src="../../../images/achievements.svg" /-->
  <img id="hamburgerButton" class="headerButton" title="Main Menu" src="../../../images/hamburger.svg" />
</div>

<div id="projectHeader">
  <img id="projectVisibilityButton" class="headerButton" title="See/change who can see the project you\'re working on"/>
  <span contentEditable="true" id="projectName" max-width="30em" title="Rename this project"/>
  <div id="projectIcons"></div>
</div>

<div id="brandingIcons">
  <img id="aboutResLabHeaderButton" class="headerButton" title="About Resonant Laboratory" src="../../../images/Resonant_Lab_cropped.svg"/>
</div>

Use color logo in navbar
Use color logo in navbar
