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

Just enclose it in an anchor tag ``. – cms_mgr Feb 08 '13 at 15:11 — cms_mgr, Feb 08 '13 at 15:11

Jonah Bishop · Answer 1 · 2013-02-08T15:18:40.377

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.

Tim Baas · Answer 2 · 2014-07-27T11:19:11.230

1

You better use an image wrapped in an anchor-tag.

But else this should work:

<div class="logo" onclick="window.location.href='homepage.html'"></div>

edited Jul 27 '14 at 11:19

answered Feb 08 '13 at 15:11

Tim Baas

6,035
5
45
72

1

This is bad practice as it will break in browsers without JavaScript (or with it disabled). – Bardi Harborow Jul 27 '14 at 09:44

score 0 · Answer 3 · answered Feb 08 '13 at 15:11

0

You can't make a background image a link. Move the image into the HTML code, and then make that a link.

answered Feb 08 '13 at 15:11

digitalfrenchfry

174
16

1

This is misleading. An element can have a background image and be linked, visually making the background image the link. – MikeSmithDev Feb 08 '13 at 15:44

Jack Allen · Answer 4 · 2013-02-08T15:30:45.693

0

<div id="myMenu">
         <div class="myWrapper">
             <nav>
                 <a href="Homepage.cshtml"><div class="logo"></div></a>
             </nav>
         </div>
    </div>

edited Feb 08 '13 at 15:30

answered Feb 08 '13 at 15:12

Jack Allen

549
2
5
19

Oh ok it works that's fine, no nonsense here.. as you've just stated..it works. – Jack Allen Feb 08 '13 at 15:27
@JackAllen just because it works, doesn't mean it's correct and will validate. But in this case, you *are* right, as long as the document in HTML5. – MikeSmithDev Feb 08 '13 at 15:38
@soyuka [some reading on wrapping block elements with a](http://davidwalsh.name/html5-elements-links). – MikeSmithDev Feb 08 '13 at 15:45
Thanks MikeSmithDev I really thought that this was not valid. – soyuka Feb 08 '13 at 15:49
Its suggesting that everything within the `` tag is a link to the href so there is nothing wrong with using this, its the same as an `` around anything else surely – Jack Allen Feb 08 '13 at 15:51
@JackAllen if it is HTML 4.01, **[its wrong](http://stackoverflow.com/a/1828032/1810243)**. – MikeSmithDev Feb 08 '13 at 16:40

score 0 · Answer 5 · answered Jun 07 '20 at 07:10

also it can be like following example:

<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #000000;">     
      <div class="logo" >
            <a href="{% url 'major' %}">
                <img src="{% static 'images/logo.gif' %}" style="width:80px;height:80px;"/>
            </a>
      </div>
      .....
</nav>

score -1 · Answer 6 · edited Feb 08 '13 at 15:14

-1

Use an <a> instead of the <div> for the logo..

edited Feb 08 '13 at 15:14

kleinfreund

6,546
4
30
60

answered Feb 08 '13 at 15:10

Roger C

338
1
5

Link my Logo to homepage html

6 Answers6