As a fairly new designer, I am facing an issue with my navbar button. Currently, it is only 100 pixels wide and fixed in place, allowing the rest of the page to scroll past it. However, although it is confined to 100PX in width, it still spans across the entire page, causing other links parallel to it to not work properly as they seem to be under the div element. Here is my HTML code:
<div class="sideNavButton" onclick="openNav()"
style="width: 100px;">
<span>
<small class="form-text text-muted">links
</small>
<img th:src="@{../../images/RunshareLogo.jpg}"
style="width: 100px; height: 100px; border-style: outset; border-color: silver;"
/>
</span>
</div>
And here is my CSS code:
.sideNavButton {
top: 0px;
display: inline;
}
While the button functions correctly, I would like it to only activate when clicked within its boundaries. When using display:inline, the button does indeed respond only when within its square area, but it continues to extend across the screen. If I change display:inline to display:block, it triggers the side nav bar even if you click parallel to the button. https://i.stack.imgur.com/pkGjs.png
The image provided illustrates my concern. The "RunShare" square acts as a navbutton, and the small arrows within the table header are used to switch between different sorted views. While all the functionality works flawlessly, when the table header aligns with the navbutton horizontally, the cursor does not change to indicate interactivity, and clicking on the arrows becomes impossible.