headers on product pages - choose new format as we add more sections

Why is this change being made?

We are adding another section to this part of the Product Handbook, Product OKRs. For all hyperlinked header sections - the page it directs the user to has a header section that links all of these sections horizontally at the top. If we add the new section, Product OKRs, there will now be 2 lines. We need to find a new way to link these all at the top of each of the section pages.

Ask:

Video overview of problem: https://youtu.be/7CiTL_gwTBk

What are some ways we can have the hyperlinked Headers from Product Principles to Our Product Leadership Team show on each page in an aesthetically pleasing way?

• Hyperlinked Sections: https://about.gitlab.com/handbook/product/#product-principles
• How they appear at the top of each page, which is the preferred way per the Product Ops team:

We also understand that we will likely add more sections so this is a problem to solve.

Author Checklist

• Provided a concise title for the MR
• Added a description to this MR explaining the reasons for the proposed change, per say-why-not-just-what
• Assign this change to the correct DRI
  • If the DRI for the page/s being updated isn’t immediately clear, then assign it to one of the people listed in the "Maintained by" section in on the page being edited.
  • If your manager does not have merge rights, please ask someone to merge it AFTER it has been approved by your manager in #mr-buddies.
  • If the changes relate to any part of the project other than updates to content and/or data files please make sure to ping @gl-static-site-editor in a comment for a review and merge. For example changes to .gitlab-ci.yml, JavaScript/CSS/Ruby code or the layout files. (this requirement has been removed pending identification of a new DRI for the handbook)