how to center the top links around a figure in hugo

Question

I am getting into hugo, but am not sure how to go about creating a hugo site with tabs that are around a central image. As follows:

What i can not figure out is (1) how to draw the lines around the headings, (2) more importantly place the image in the center. I have been trying to do this with the academic, and blogophonic and also minimal templates. All the templates that i am trying to look at have the icon in the side. Perhaps some other template is better but I can't tell how to get the top menu list to center around the round circle (it is a png) in the center. Any suggestions? TIA.

Answer 1

Use this HTML in your layout:

<div id="navbar">
  <a href=""><img src="" /></a>
  <ul>
    <li><a href="">item 1</a></li>
    <li><a href="">item 2</a></li>
  </ul>
  <ul>
    <li><a href="">item 3</a></li>
    <li><a href="">item 4</a></li>
    <li><a href="">item 5</a></li>
  </ul>
</div>

And add the following CSS:

#navbar {display: flex; justify-content: space-between;}
#navbar ul {display: flex;}
#navbar ul li {list-style: none;}
#navbar > a {position: absolute; left: 50%; transform: translateX(-50%);}