Question posted in 
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.
3
Answers
If u use javascript add an id for it , and u can use onclick event in java , or add an onclick event inside html tag.
To be “clickeable” set cursor to pointer in css for those items
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-betweenon their shared parent element to distribute them. For example: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.
This happens a lot of times when your other elements are covering your button. Your third image is completely covering your button. You could make it into a collapsible menu and then display all the items in a list, or wrap the button to a second row.