htmlcssbuttonmenuclick

"Sign Out" button and logo not clickable

I have a menu bar which I created with HTML and CSS.

I have buttons that are centralized in the middle of the menu bar, which work perfectly fine. My problem here is that the buttons on the wings, "Sign Out" button and logo button, are not clickable. These 2 buttons are aligned well and in proper placement, just I cannot click them for some reason.

<div style="background-color: #f8f9fa; padding: 0px; border-bottom: 1px solid #ccc;">
  <div style="display: flex; align-items: center; height: 70px; position: relative;justify-content: space-between;">
    <div>
      <a href="https://www.test.com/" style="text-decoration: none;">
        <img src="static/LOGO 1.png" alt="Logo" style="max-height: 60px; margin-left: 15px;">
      </a>
    </div>
    
    <div id="hamburger" style="display: none; cursor: pointer; margin-right: 15px;">
      <div style="width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
      <div style="width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
      <div style="width: 25px; height: 3px; background-color: black; margin: 5px 0;"></div>
    </div>
    
    <div id="menu-items" style="display: flex; justify-content: center; align-items: center;">
      <div style="margin: 0 20px; display: flex; align-items: center;">
        <a href="https://www.test.com/myclips" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Clips</a>
        <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
            {{ myclips }}
          </span>
      </div>
      
      <div style="margin: 0 20px; display: flex; align-items: center;">
        <a href="https://www.test.com/myhighlights" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Highlights</a>
        <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
            {{ myhighlights }}
        </span>
      </div>
      
      <div style="margin: 0 20px; display: flex; align-items: center;">
        <a href="https://www.test.com/mymatches" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">My Matches</a>
        <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
            {{ mymatches }}
          </span>
      </div>
    </div>
    
    <div style="margin: 0px; display: flex; align-items: right;">
      <a href="https://www.test.com/logout" style="background-color: #00bbff; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; margin-right: 15px; font-weight: 700; text-decoration: none;">Sign Out</a>
    </div>
  </div>
  
  <div id="mobile-menu" style="display: none; background-color: #f8f9fa; position: absolute; top: 100px; width: 100%; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000;">
    <a href="https://www.test.com/myclips" style="padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
      My Clips
      <span style="margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
        {{ myclips }}
      </span>
    </a>
    
    <a href="https://www.test.com/myhighlights" style="padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
      My Highlights
      <span style="margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
          {{ myhighlights }}
      </span>
    </a>
  
    <a href="https://www.test.com/mymatches" style="padding-left: 50px; display: flex; justify-content: space-between; text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin: 10px 0;">
      My Matches
      <span style="margin-right: 50px; background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
        {{ mymatches }}
      </span>
    </a>
  </div>
</div>

My goal is to have the button "Sign Out" and the logo image both clickable.

Solution

  • The <div id="menu-items"> is styled to be the full width of its container, so it has empty space that's obscuring those other elements beneath it.

    Remove its absolute positioning and its 100% width, also remove the auto margin from the first part of the header, and use space-between on their shared parent element to distribute them. For example:

    <div style="background-color: #f8f9fa; padding: 0px; border-bottom: 1px solid #ccc;">
  <div style="display: flex; align-items: center; height: 70px; position: relative;justify-content: space-between;">
      <div>
          <a href="https://www.example.com/test" style="text-decoration: none;">
              <img src="static/LOGO 1.png" alt="Logo" style="max-height: 60px; margin-left: 15px;">
          </a>
      </div>
    <div id="menu-items" style="display: flex; justify-content: center; align-items: center;">
      <div style="margin: 0 20px; display: flex; align-items: center;">
            <a href="https://www.example.com/test" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
            <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
              100
            </span>
        </div>
        <div style="margin: 0 20px; display: flex; align-items: center;">
            <a href="https://www.example.com/test" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
            <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
              100
          </span>
        </div>
        <div style="margin: 0 20px; display: flex; align-items: center;">
            <a href="https://www.example.com/test" style="text-decoration: none; color: #000000; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700; margin-right: 5px;">Test</a>
            <span style="background-color: #007bff; color: #ffffff; padding: 3px 8px; border-radius: 4px; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; font-weight: 700;">
              100
            </span>
        </div>
    </div>
    <div style="margin: 0px; display: flex; align-items: right;">
        <a href="https://www.example.com/logout" style="background-color: #00bbff; color: #ffffff; border: none; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: 'Noto Sans', 'Noto Sans TC', 'Noto Sans SC', sans-serif; margin-right: 15px; font-weight: 700; text-decoration: none;">Sign Out</a>
    </div>
  </div>
</div>

    Overall, there's a lot that CSS flexbox can do to style your elements. It's better to make use of that than to try and manually position things with combinations of absolute positioning, margins, false widths, etc.