Streaming live at 10am (PST)

Bold hover items in the main navigation


#1

Hey guys,

I’m just new here at Webflow and I’m struggling a little bit. I want to do a main navigation bar with its items become bold on its hover and focused state. The problem is that, because of the padding, when I hover any of this elements it moves the rest. I want to do something like this:

Any ideas about how can I achieve that?

Thank you,
Jonathan


#2

Hello @Jonatan_Centeno, would you mind sharing your read-only link.

For now, here’s info about adjusting states in Webflow.


#3

Hey Matthew,

I haven’t shaed it because I haven’t done anything :joy::joy:

Anyway, here you have: https://preview.webflow.com/preview/jonathans-first-project-fa93f5?preview=d63917ebf35aec1d0d211eec59c24c37


#4

Thanks Jonatan,

Here’s my suggestion

Select one of the Nav Item elements then in the Styles panel open the “states” dropdown and choose hover.

Next to the Class Name you will see the Hover state. Now change the weight of the font to bold and give the background a color.

Go back to the states dropdown and choose none. Now in the styles panel go down to transitions and add one for the background color.
58

Now to remove the jumpiness as the buttons adjust to a hovered button being wider, you could add a fixed width to the buttons.

This is the result.
03

The buttons don’t jump around anymore, but there is a shift in the button title. This is due to the chosen font as the letter spacing is different for the font weights. If you don’t like this, try a different font.

Another option on the buttons would be to use flexbox instead of fixed width. You can learn about that here.

Hope this all helps. Happy designing!


#5

Thanks a lot for your answer :blush:

It helped me a lot but I think you are right. I think I should change the hover state because it doesn’t work well with the font. I can’t change the font, I have all the design already done with Adobe XD. Once again, thanks a lot for your help and feedback! :blush:


#6

My pleasure. :raised_hands:

You might try using opacity or a darker font color on hover instead of bold. Could give you the same emphasis on the hover element without the side effects.


#7

Totally agree, but I didn’t realize about that issue till now. I have already changed it, you can take a look if you want. You can also see my full prototype version in invision if you feel curious :blush:: https://invis.io/RMKDEHD6N74#/291764036_01_Inicio

Any feedback there is appreciated too. Once again, thanks for your advice! :blush:


#8

Looks good! Can’t wait to see it built in Webflow. Let me know if you have any further questions.


#9

Thanks a lot Mattew :blush:

Well, I’m now struggling with the underline effect of the hero text. I’ve done an span element with some border down it. To push it upper, I made it an inline-block but, when the line breaks it doesn’t work properly: https://gyazo.com/b5a3ad5c6253cc37bcd343abf15e6713

With the inline property works well but I don’t know how you push it upper: https://gyazo.com/b5a3ad5c6253cc37bcd343abf15e6713


#10

Please share your read-only link now that you have a project.

I recommend using the Inner Shadow for animating any color overlays on text whether that’s a underline or highlight effect. This avoids the spacing and size issues that can be caused when trying to use borders for text hover effects. Make sure to add a transition to the box shadow and then change the parameters on hover.

43

57


#11

Do you mean this one: http://jonathans-first-project-fa93f5.webflow.io/?

Man, you are a genius, it works perfectly! :blush:

Once again, thanks a lot. :blush:


#12

:+1:

Adding the inner shadow effect to the hover and current states of the nav-items could be a nice way to connect those visually, if you like the idea.


#13

Yeah, it’s a nice idea, I tried during the design process. The problem is that with some pages, the background image of the projects doesn’t fit with that effect so it gets lost.