title: How do I make a fixed position div a clickable link?
body: <p>I have seen the question <a href="https://stackoverflow.com/questions/796087/make-a-div-into-a-link">make a div a link</a> but the basis behind it is having the div <code>position</code> set to <code>relative</code> . But in my case where I have centered my div and it is also circle (I don't know if that makes a difference or not) but I have used fixed position so that no matter what size screen you have, it is always horizontally centered.</p>
  
  <p>Based on that information, how should I go about making my whole logo (div) a clickable link.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Centering of the content */
  div.homepage {
   position: fixed;
     text-align: center;
    margin: 0 auto;
   left: 0;
   right: 0;
  }
  
  /* Logo Design */
  div.circle {
   margin: 0 auto;
   border-radius: 50%;
   width: 900px;
   height: 900px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   background:
   linear-gradient(135deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px),
   linear-gradient(225deg, #dddada 22px, #d9ecff 22px, #fff 24px, transparent 24px, transparent 67px, #fff 67px, #fff 69px, transparent 69px)0 64px;
   background-color:#dddada;
   background-size: 64px 128px 
  }
  
  p.pavel, p.design {
   font-family: 'Open Sans', sans-serif;
   font-size: 12em;
   color: #708090;
   margin: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="css/index.css" rel="stylesheet" type="text/css"&gt;
  &lt;body&gt;
   &lt;div class="homepage"&gt;
    &lt;div class="circle"&gt;
     &lt;p class="pavel"&gt;Pavel&lt;/p&gt;
     &lt;p class="design"&gt;Design&lt;/p&gt;
    &lt;/div&gt;
    &lt;ul&gt;
     &lt;li class="button"&gt;&lt;a href="index.html" data-text="Home"&gt;Home&lt;/a&gt;&lt;/li&gt;
     &lt;li class="button"&gt;&lt;a href="about.html" data-text="About"&gt;About&lt;/a&gt;&lt;/li&gt;
     &lt;li class="button"&gt;&lt;a href="services.html" data-text="Services"&gt;Services&lt;/a&gt;&lt;/li&gt;
     &lt;li class="button"&gt;&lt;a href="contact.html" data-text="Contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is what the site looks like and I want the big circle bit to be clickable</p>
  
  <p><a href="https://i.stack.imgur.com/9k4YT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9k4YT.png" alt="enter image description here"></a></p>