Daniel Hobbs Daniel Hobbs - 4 months ago 8
HTML Question

Make entire top bar hover-able without use of image

So I have been using an image to make the area work, but I had been using a very wide image with a white background to just give the illusion of the area being hoverable. However this causes issues on smaller screens as the image becomes tiny.

http://outside.hobhob.uk

The area I am referring to is the top white bar with the middle arrow. I want to be able to remove the image () and replace it with a simple text arrow;

<i class="fa fa-arrow-down"></i>


So editing the following code;

<header id="header" role="banner">

<center id="showHeader">
<img src="http://outside.hobhob.uk/test/img/a.jpg">
<div class="headwidth">
<h1 class="logo">
<a href="index.html" title="Outside The Line"><img src="images/logo.png" alt=""></a>
</h1>
<nav id="main-nav">
<a href="index.html">Work</a>
<a href="about.html">About</a>
<a href="testimonials.html">Testimonials</a>
<a href="contact.html">Contact</a>

</nav>
</div>
</center>
</header>


and the following CSS:

center#showHeader > img:hover + .headwidth, .headwidth:hover
{
height: 220px;
width: 100%;
}
.headwidth {
max-width: 1000px;
width: 100%;
position: relative;
margin:0 auto;
background-color: #ffffff;
display: block;
transition: .7s;
height: 0px;
overflow: hidden;
}
.logo {
color:#29251F;
font-size: 84px;
line-height: 1.1;
word-wrap: break-word;
font-weight: 800;
text-transform: uppercase;
margin:0;
text-align:left;
}
.logo a {

margin:0 auto;
}


I had added :hover to the end of #showHeader but this just stops it working all together when I add the arrow text in to replace the image.. Any suggestions?

Thanks!

Answer

how about

center#showHeader:hover > .headwidth {
  height: 220px;
  width: 100%;
}

instead of using the icon for your action, use the bar itself. No aiming required.