Marit Carmelle Glas Marit Carmelle Glas - 21 days ago 11
CSS Question

Get the Navbar to show when hovering over header image

Here is my header image including socials buttons, from child bootstrap. I want to show my navigation bar when hovering over the header image? Is this possible?

<div class="container-fluid">

<div class="row">
<a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
<ul class="fh5co-social">
<li><a href="#"><i class="icon-twitter"></i></a>
</li>
<li><a href="#"><i class="icon-facebook"></i></a>
</li>
<li><a href="#"><i class="icon-instagram"></i></a>
</li>
</ul>
<div class="col-lg-12 col-md-12 text-center">

<a href="index.html">
<img src="" alt="" style="width:1100px;height:300px;">
</a>
</div>

</div>

</div>

<div class="fh5co-menu">
<div class="fh5co-box">
<h3 class="heading">Categories</h3>
<ul>
<li><a href="#">Travel</a>
</li>
<li><a href="#">Style</a>
</li>
<li><a href="#">Photography</a>
</li>
<li><a href="#">Food &amp; Drinks</a>
</li>
<li><a href="#">Culture</a>
</li>
</ul>
</div>
<div class="fh5co-box">
<h3 class="heading">Search</h3>
<form action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="Type a keyword">
</div>
</form>
</div>
</div>
</div>


I have set up the navigation menu, but I do not know how to include the hover transition when hovering over another element. Do I need to use Javascript or can I use CSS?

KBJ KBJ
Answer

Your HTML should look like

...
<img src="images/header2.png" id="header-img" alt="DEXTROSEMAG" style="width:1100px;height:300px;">
...
<div class="fh5co-menu">
  <div class="fh5co-box" id="hidden-navbar">
    <h3 class="heading">Categories</h3>
    <ul>
      <li><a href="#">Travel</a>
      </li>
      <li><a href="#">Style</a>
      </li>
      <li><a href="#">Photography</a>
      </li>
      <li><a href="#">Food &amp; Drinks</a>
      </li>
      <li><a href="#">Culture</a>
      </li>
    </ul>
  </div>
  <div class="fh5co-box">
    <h3 class="heading">Search</h3>
    <form action="#">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Type a keyword">
      </div>
    </form>
  </div>
</div>
</div>

Using only CSS:

#hidden-navbar {
    display: none;
}

img#header-img:hover div#hidden-navbar {
    display: block;
}

Although this method may not be very compatible with every browser especially IE6. Some people use a variant of this, which is img#header-img:hover ~ div#hidden-navbar.

The JS Way

//js
document.getElementById('header-img').onmouseover = function() {
    document.getElementById('hidden-navbar').style.display = 'block';
}