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 🙂

15 Comments

  1. Nathan B. Weller

    Great write up SJ, love it! I’ve gone ahead and shared it around 🙂

    Reply
    • Stephen

      Thanks Nathan 🙂 Much appreciated

  2. Cath

    I loved that when l first saw it, thank you so much for sharing. Love that the WP community is so generous!

    Reply
    • Stephen

      Thanks Cath! It was a fun site to work on, glad you like it 🙂

  3. Will

    Thanks for that! Lovely site you created!

    Reply
    • Stephen

      Thank you Will 🙂

  4. Deana

    Wau! Great idea, I’ll try to repeat on one new clients site. I hope for good result.

    Reply
    • Stephen

      Please let me know how you get on and thanks for reading 🙂

  5. Amy Valentine

    I am completely blown away by how easy this is! I am so inspired that I’m going to try this tutorial on a client’s site right now… Brilliant and thanks for sharing SJ:)

    Reply
  6. Tony

    Thanks! This is really great. I will give it a try!

    I’d also like to see how you created the top menu too!

    Reply
  7. Chook

    Freaking awesome! SJ
    For the work on Greedie Goddess site and sharing how you did it.

    Cheers’

    Reply
  8. Mario

    Awesome mate, thanks for sharing. Would never have imagined it would be this easy

    Reply
  9. Dustin

    How is the responsive part of the menu handled where it collapses to just one image?

    Reply
  10. jac

    Hi love the design, how would you go about having those images carousel in mobile only?
    Thanks for the tutorial.

    Reply
  11. Benbodhi

    Cool article!
    I thought I would share that I had a similar task to achieve with the hexagonal social links in the footer of http://mrbillstunes.com/

    I ended up writing a WordPress plugin (SVG Support – https://wordpress.org/plugins/svg-support/) to achieve it using a single SVG image that I embedded links in using illustrator.

    The vector SVG file now has the links in the exact shapes of the sections you need to link, acting like “hotspots”. But WordPress by default (after activating my plugin) will render the SVG in an IMG tag so the links won’t work… If you add the class “style-svg” to the IMG, then it will be automatically swapped out for the inline SVG/XML code, which keeps the links intact and also allows css targeting of elements within the SVG for animation or any other style purpose.

    Just thought I would share how I dealt with a very similar problem 🙂

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

IMPORTANT: Due to an issue with our site, the purchase of all premium products are being redirected to our sister company, aspengrovestudios.com. You will still receive the exact same great products and 5 star support. Contact us at support@divi.space with any questions. Thanks! Dismiss