Can't give anchor link to logo

user_14787314 0
Viewed 96

I am currently making a website and I have put my logo in like this:

header .logo a {
  background-image: url(Images/FRANKEN\ DEVELOPMENT\ FATTER\ AND\ OTHER\ COLOR2.png);
  background-size: 250px;
  display: inline-block;
  height: 80px;
  text-indent: -9999999px;
  width: 300px;
  background-repeat: no-repeat;
  position: relative;
  top: -21px;
  left: 25px;
  filter: contrast(2);
}
<header>
  <nav>
    <ul id="navbar">
      <li class="logo"><a>Franken Development Logo</a></li>
      <li><a class="categories" href="#">Home</a></li>
      <li><a class="categories" href="#">Websites</a></li>
    </ul>
  <nav>
<header>

As you can see, my text is out of frame with text-indent: -9999999px;

But know, when I make it a link (the logo), it will not work because the text will become a link (which is far away from vision) and not the image.

How do I make it so my logo goes to index.html? And not the text, representing the logo.

-Ian

href anchor css html
2 Answers

If you want a logo and text to represent your company name, you can wrap both in an anchor tag.

Examples:

With visible text:

<a href="/index.html">
    <img src="/image/path/here" aria-hidden="true">
    <p>Franken Development</p>
</a>

With alt text instead of visible text:

<a href="/index.html">
    <img src="/image/path/here" alt="Franken Development logo">
</a>
user_16696820

Use Href for the image itself.

header .logo a {
  background-image: url(Images/FRANKEN\ DEVELOPMENT\ FATTER\ AND\ OTHER\ COLOR2.png);
  background-size: 250px;
  display: inline-block;
  height: 80px;
  text-indent: -9999999px;
  width: 300px;
  background-repeat: no-repeat;
  position: relative;
  top: -21px;
  left: 25px;
  filter: contrast(2);
  border: 2px solid grey;
}
<header>
  <nav>
    <ul id="navbar">
      <li class="logo"><a href="#">Franken Development Logo</a></li>
      <li><a class="categories" href="#">Home</a></li>
      <li><a class="categories" href="#">Websites</a></li>
    </ul>
    <nav>
      <header>

Source

user_132622040
Related