Daniel Hobbs Daniel Hobbs - 1 year ago 62
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.


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>
<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>


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 {
font-size: 84px;
line-height: 1.1;
word-wrap: break-word;
font-weight: 800;
text-transform: uppercase;
.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?


Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download