-1

Even though the image is in the center of the page somehow I can click on the entire width of the image, which interferes with the hamburger feature of the page. Where did I go wrong?

The CSS:

.logo img{
  margin-left: 7.8%;
  float:left;
  user-select: none;
  position: relative;
  z-index: 1;
}

@media (max-width: 769px) {
 .logo img{
  float:none;
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
}

enter image description here

Zack Roberto
  • 229
  • 1
  • 2
  • 10

3 Answers3

3

You have the .logo img as display:block, which will take up the entire width of it's parent container. I would change that to display:inline-block

See here: (What is the difference between display: inline and display: inline-block?)

Napoli
  • 1,389
  • 2
  • 15
  • 26
  • Yes but if I do that the image is not centered anymore. – Zack Roberto Apr 20 '18 at 16:07
  • if you'd like to leave it block, that's fine; then you'll need to adjust your hamburger menu (which should be absolutely positioned atop (fixed or otherwise) anyway, just ensure the z-index is higher than your image. It really depends on your design/html markup; but the general issue here is block-leveling. – Napoli Apr 20 '18 at 16:10
1

You can use display-flex to align items easily. z-index: -1 will allow hamburger to capture the event and not the image.Try to click on the hamburger placeholder div and image and see the respective click working

/* Styles go here */
header {
  height: 60px;
  background-color: black;
  position: relative;
}

div.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  z-index: -1;
}

.hamburger {
  width: 30px;
  height: 30px;
  background: red;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
}

img {
  line-height: 80;
}
<header>
  <div class='hamburger' onClick='alert("hamburger")'></div>
  <div class="img-container"><img src="http://via.placeholder.com/350x50" onClick='alert("image")'></div>
</header>
ashfaq.p
  • 5,379
  • 21
  • 35
-1

Like @Napoli sayed, and because I can't see your html code... you should use display:inline-block and then give a margin to center it like margin: 0 auto;

JPeter
  • 219
  • 1
  • 14