I am facing an issue with the positioning of my logo on the top of my webpage. The logo has letters that hang down over the menu bar, particularly a 'y'. Without any complex coding, I have managed to adjust the heights of the containers to make it look fine. However, the problem arises when the image blocks the links in the menu, making them unclickable as they are positioned behind the transparent background of the logo.
Hopefully, that explanation was clear enough. Below is the code I am using, which is relatively simple:
<header>
<asp:Image ID="Image1" CssClass="logo" runat="server" ImageUrl="/media/1001/logo.png" />
</header>
<menu>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">How To Order</a></li>
<li><a href="#">Products</a></li>
<li class="noBorder"><a href="#">Blog</a></li>
</ul>
</menu>
CSS:
header { background-color: #3a8c86; border-bottom: solid 4px #20716b; height: 52px; }
header img.logo {margin-left:5px;}
menu { background-color: #e78898; height: 21px; }
menu ul li { float: left; list-style: none; margin: 3px 0 0 14px; padding-right: 14px; border-right: solid 1px white; }
menu ul li a { color: white; text-decoration: none; }
Your assistance would be greatly appreciated. Thank you.