Creating a page header

You can create a custom header for Primo by adding a header.html file to the header-footer folder.

On our footer.html file, I have lots of local customizations. However, I've kept our header simple — just a our library logo linking to our library homepage.

In the code below, you'll note that I've added styles local to each element. This allows this file to act as a component with all the needed code localized to this one file. Otherwise, I'd also need to edit the custom.css file to make any changes to the header.

In Primo, some images have to have specific names and locations because they are built into the discovery layer templates. Because this is our own code, the image name and location can be customized to our needs. I've kept the image with other images in the assets > images folder for convenience.

Finally, the image URL in the code below needs to be localized to your custom view — "custom/YOUR_VIEW/assets/images/library-header-logo.png"

<header>
  <div class="library-logo" style="background-color: #AD0F2A; width:100%; height: auto; margin: 0;">
   <a href="https://www.lib.miamioh.edu"> 
     <img src="custom/01OHIOLINK_MU-MU_NDE26/assets/images/library-header-logo.png" alt="Miami University Libraries" style="max-width: 400px; height: auto; margin: 0px auto; padding: 15px; display: block;"> 
   </a>
    </div>
</header>