Daniel Hobbs Daniel Hobbs - 4 months ago 8
CSS Question

Make hidden header appear on smaller screens only

So I have a website which has the header show when a arrow is hovered over with the cursor, however on a mobile it does not work very well.

I was wondering if its possible to make the header show when on a smaller device? Could I use CSS to hide the arrow but trigger the hover event on the page loading?

Ideally I need to do this for screens around 480px, as these are when the hover has most issues on being tapped.

The header is quite simple 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>

</center>
</header>


My CSS;

header .container{
position:relative !important;
}
center#showHeader:hover > .headwidth {
height: 180px;
width: 100%;
}


.headwidth {
max-width: 1000px;
width: 100%;
position: relative;
margin:0 auto;
background-color: #ffffff;
display: block;
transition: .7s;
height: 0px;
overflow: hidden;
}


Website Example

Answer

[EDIT]

The following code will fix your issue:

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}

Check out this fiddle for a visual representation (Try to push the screen to width less than 480px).

Snippet:

header .container {
  position: relative !important;
}

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

.headwidth {
  max-width: 1000px;
  width: 100%;
  position: relative;
  margin: 0 auto;
  background-color: #ffffff;
  display: block;
  transition: .7s;
  height: 0px;
  overflow: hidden;
}

@media screen and (max-width: 480px) {
  .headwidth {
    height: 180px;
  }
}
<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>


[INITIAL ANSWER]

You can use @media queries in CSS to make your website scalable and responsive. The are a lot of ways to use media queries, but I like to use them like so:

.element {
    /* The code to be used for this element in general */
}

@media screen and (min-width: 1300px) {
    .element {
        /* The code to be used for this element in devices wider than 1300px */
    }
}

The above example can show different content at different sizes based on the minimum width of the screen of the user's device.

Be sure to check out these pages for info related to the correct use of media queries as well as easily comprehensible examples: