-1

I am trying to make a header with a fixed title, horizontally and vertically centred. With a home icon that acts as a link.

The problem is that link is clickable on everything left of the Home icon.

I have tried to replicate the problem in this codepen;

body {
  margin: 0;
  background-color: #2d2d2d;
}

#header {
  margin: 0;
  background-color: rgb(171, 228, 250);
  height: 10vh;
  display: flex;
}

#homeIcon {
  position: absolute;
  padding-top: 2px;
  padding-left: 30vw;
  height: 10vh;
}

#headerTitle {
  margin: auto;
  font-size: 5vh;
  color: #2d2d2d;
}
<div id="header">
  <a href="">
    <img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
  </a>
  <h1 id="headerTitle"> title </h1>

</div>

Is there a way to have the link only on the content of the img tag?

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
RyanJG
  • 41
  • 5

2 Answers2

1

In your CSS you are specifying the homeIcon has a padding-left of 30vw. If you change this to margin-left instead, it will no longer be clickable. This is because padding is included inside your element, while margin is outside. See https://www.w3schools.com/css/css_boxmodel.asp.

MatthewG
  • 8,583
  • 2
  • 25
  • 27
0

The css is your problem: you can solve it by changing padding-left: 30vw; to margin-left: 30vw;

This answer may be useful background reading: Difference between margin and padding?

moo
  • 1,597
  • 1
  • 14
  • 29