Creating a Hero Navigation Section

Creating a Hero Navigation Section

Last year I built a site for my client ‘Greedie Goddess‘, a provider of Smoothie Bites, a healthier snacking alternative to crisps and sweets. Though various changes have been made to the site since we sent it into the wild, the feature that gets commented on the most has remained pretty much the same: The hero navigation section.

responsive hero navigation

The hero navigation section is comprised of 5 separate images that respond by growing and shrinking as they are hovered over. They are responsive too, to a point. As devices get smaller we’ve swapped out the 5 images for a single images and reverted to navigation by the standard Divi mobile menu.

There are two things you have to get right to make a section like this for yourselves. All references to CSS in this article should be placed in a child theme or CSS box in your theme options. Here’ how to do it:

Make the images fit

 

responsive hero navigation 2

Add all of your images to a full-width text box and give each image a unique ID. You can do this by swapping to the ‘text’ editor view and adding the ID to the image tags like this ” <img id=”image-one”…”. While you’re there, give the row an ID too. Something like “hero-menu”…

If you’re going to be using the images as links you can just use the WYSIWIG editor to add those in too.

Now, to get all of you images to fit onto one line you need to limit their widths. You could say that five images to fit into 100%, just do;

#hero-menu img {
    width: 20%;
}

The issue that I came across is that my images look funky if I tried to make them all the same size, some are naturally wider than others. That’s where our individual image ID’s come in handy. Instead we can use;

#image-one { width: 22% }
#image-two { width: 21% }
#image-three { width: 16% }
#image-four { width: 17% }
#image-five { width: 24% }

You can adjust these numbers dependant on how many images you’re using and how big they are compared to the images next to them. As long as the total is 100%, they all sit and scale nicely on one line. Bear in mind, as I did that at some point the images will likely be too small to be useful. You have two options at this point; hide the section and use a different one (Divi’s ‘hide on mobile’ section features come in handy here) or use fewer images and adjust the allocation of space.

Making them respond to hover

As you’ll most likely want the images to all respond in the same way when hovered over, you can use the broader CSS selector in this case. The following code will make the images grow as they are hovered over and then sink gently back into place as the user moves on. It’s a small change but it improves the user experience and encourages the user to spend time exploring the page.

#hero-menu img {
  -ms-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
#hero-menu img:hover {
  -ms-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

The scale reference uses an origin of ‘1.0’. If you set it to that then it would just keep its size. Make the number larger to grow and smaller to shrink.

That’s pretty much all there is to creating a navigation section. I hope you found this helpful 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.