Link my Logo to homepage html

Question

I want to make my Logo in my header clickable and link to the homepage but i don't know exactly how to do this right.

My code:

Navigation menu:

HTML

<div id="myMenu">
            <div class="myWrapper">
                <nav>
                    <div class="logo"></div>
                </nav>
            </div>
        </div>

CSS

#myMenu
{
    width: 100%;
    height: 30px;
    z-index: 999; 
    background-color: #252e30;

}
.myWrapper
{
    max-width: 660px;
    margin: 0 auto;
}

.logo
{
    display: inline-block;
    width: 156px;
    height: 30px;
        margin-top: 5px;
        background-size: auto 43px;
    background-image: url(../images/mylogo.png);
    background-repeat: no-repeat;
}

I want my logo make clickable and link to the page: Homepage.cshtml

Answer 1

Instead of using CSS to set your logo as a background image, what would be wrong with using the img tag, surrounding by a link? Like so:

<div id="myMenu">
  <div class="myWrapper">
    <nav>
    <a href="/"><img src="../images/mylogo.png" height="30" width="156" /></a>
    </nav>
  </div>
</div>

This has the added benefit of being more accessible (especially if you use an alt attribute on your logo), which makes search engine bots happier. Image content that conveys meaning to the user should never bet set using CSS.