Nav Bar Hover & Revealing the small text description

Hi Webflow Community,

I’m a newbie here, migrating from Muse. I need help regarding the Nav Bar.

Here’s what I’m trying to achieve.

I want my Nav Bar let’s say FAMILY, if you mouse hover the FAMILY, I want a 2 word description revealing in a smaller font size underneath the FAMILY menu.

In Muse, I’m using the State Button as the trigger.

Could you please help me which tools I need to use to make this effect?

Thanks in advance,

russ

Hi @russ8

Welcome to the Webflow community!

You should be able to find all the help here you need to make it a very smooth transition. You’ll soon be thinking “Muse who?”

It sounds like it will be the interactions panel you’ll use, however, so we can help you create the interaction you’re after, could you post an example of what you’d like? It may make it easy for us to recreate the steps for you to follow.

Or, if you’ve started on a project, then share your read only link. That way we can edit your actual site, without any of the changes being saved.

Hi @magicmark

Many thanks for the welcome & for a quick reply.

Can’t wait to fully migrate to Webflow & I’m starting learning step by step in the Webflow University, hopefully a quick learning experience with the help of Webflow Community Forum.

And yes I want to move on and you’re right “Muse who?” :blush:

I’ve start doing the Nav Bar in Webflow but I can’t figure it out how to do it, & ended up deleting the section because it doesn’t work for me.

I’ve tried multiple times & failed me, searching for the similar effects tutorial in the Webflow University but I can’t find one close to it & my last chance is to seek help with the Webflow Community.

I haven’t try the “Sharing a project’s link” because I’ve started to try Webflow for a couple of days only.

If I may allow sharing the Business Catalyst links here I can show you what I need to achieve in Webflow.

https://landingpage106.businesscatalyst.com/index.html

@Moderator/Admin, If the link above is not allowed sharing here please delete my post, I fully understand.

But if it’s okay kindly review the links. I want the same effects when the mouse hover the Nav Bar Menu and the the description is revealing. Also when you mouse hover the images the description is reveled as well.

Kindly help me figuring out these effects in Webflow for my start-up.

Thanks in advance & appreciate your support in newbies like me.

Regards,

Russ

1 Like

Thanks for the link with what you’re after.

So this would be simple to set up with an interaction. Here’s a quick(ish) look at one way that could be done;

https://cl.ly/2N0U2M472M1K

Sharing the link is no problem as long as they’re safe :grinning:

If you’re around at 6pm GMT today, pop by and say hello to Nelson and me :smiley:

1 Like

Hi @magicmark,

It was a huge speedy help! Thank you sooo much for the teachings & quick recording, appreciate your effort to show me how to do it.

Ohh I love to join the livestream but I’ll catch you & Nelson on your next because it will be 1 AM here in my location, but surely will watch your replay.

Will do first thing tomorrow morning your tutorial vid & no more sleepless nights:)

Thank you & kind regards,

russ

Hi @magicmark,

Hope the livestream went well yesterday.

I’ve just did it, following on your tutorial vid is awesome.

I would like share what I’ve achieve today. Here’s the link below.

https://preview.webflow.com/preview/fiftyandco?preview=8bcda5d31d5e25a6d519cfee1e6fd348

I’m just wondering why on Tablet & Mobile phones, the Nav Bar is hiding at the back of Fanfare tab.

This is very complicated for a newbie like me & I don’t want to mess around with what I’ve started:)

Could you please review on your free time?

Thanks in advance,

Russ

Ah, you have every nav wrap in it’s own Nav Menu, you only need one Nav Menu.

Ideally you can try and simplify the way you’re moving your elements. There is no reason in this instance to use negative padding or margins to move items closer, and it can be difficult when you’re cascading down the breakpoints.

Try the flexbox game here: I promise it will be a very worthy investment of your time.

It will help you arrange your elements so much more quickly and easily than the way you are used to.