Kickass Navbar Design

Design help General
1

Hi Webflowers,

I am very close to setting up the navbar how I want it, but I still need help with some details:
How can I set the active state so that the underline stays on the nav item until you click on another element ( is it the focused state? If so its not working although set) ?

How can I get rid of the small offset every time one hovers over ? It must have to do with the positioning - but when i try to change it to another one - the layout gets messed up.

And thirdly I’d love to know how to only animate the underline in the hover state - (ie. increasing opacity or even that it grows from left to right?) I tried activating the hover state go to interaction on mouser hover add animation oppacity but it affects the whole nav link.

Thank you

Here is my site Read-Only: Webflow - BACKUP ONLY wtm

2

HI there @sure13

So step be step here is what you need to do:

  1. for this you can do it using custom code - what you do is you add a “combo class” to the nav link that has the underline (lets call it “underline”), so that when you remove the combo class the underline is gone. Then you add a little script that will toggle the combo class on click and at the same time remove the same combo class from all the other elements that can have it… here is the code:

   $('.nav_link').on('click', function() {
  $(this).toggleClass('underline')
  $('.nav_link').not($(this)).removeClass('underline')
})
</script>

Paste this code into the "Before tag, and since it is in the nav bar and present on mostly all pages put it into the custom code section in the Project Settings>Custom Code - so that it applies to the whole project.

  1. When you click on your Nav Link you have all your positioning settings indicated in blue, once you select the “hover” state, all the settings that are the same as in the normal state are in orange, and the ones you changed are in blue - you should check there - one of the setting changed where it didn’t need to and pushes everything on animation.

  2. its straight forward, all you need to do is this: imagine that the regular (“none”) state is the beginning of a timeline and hover state is the end of the timeline - so if an object (here your line) is in one location and in when it is in the hover state it is in a different location, when the state changes (from regular to hover) the line moves. If you want it to be animated you should apply a “transition” to the regular state - the transition should correspond to the type of the change that happened in the hover state (meaning that if it moved, then its a “transform” transition, if its “opacity” its then its an “opacity transition” - there is a catch all “ALL Properties” but all it does is it lists all transitions in your code and make you page slower to load… so pick the right ones).

Additionally you can add the duration (in ms - 1000ms=1s) and the motion of the transition (ease in, out etc…).
59%20PM

11%20PM
11%20PM234×1287 39.5 KB

Enjoy!

3

Thank you so much for this awesome help.

  1. I followed the instruction, but now i have a permanent underline and it seems like the script does not trigger. When you say “paste it before tag” where is this exactly (maybe a screenshot) . so far I added your script to Projec settings > custom code and added at the beginning.

  2. super helpful :slight_smile:

  3. great. I managed to do a transisition in oppacity, however it only affects the menu item text but not the underline . How can i affect the underline as well?
    I also tried to figure out how to make the underline grow from left to right by choosing “border” in the transition menu but it only grows it vertically which is very weird and not smooth.

Thanks so much again

34
341696×738 142 KB

4

Hi,

So for the transition animation see this little video I made for you.

As for the script, you should be pasting it into this area:

13%20AM
13%20AM2512×2532 259 KB

make sure that you give the names of the div’s correctly to make sure it works. Couple of notes:

  1. remember scripts only work on a published site - not in preview - that means that to test it you need to publish the site and then go to the live page and see if it works there…
  2. just like with hover effects if you apply transition on the main class they will animate the transition to the combo class - when the script triggers the toggle.
5

thank you so much! NOW IT KICKS ASS :slight_smile:
this was really helpful! In the end I decided to not use the script although I made it work :slight_smile: It looks better as it is.

One really last question that I have - I have noticed that the transitions on the nav item when clicking on it are not so smooth and more abrubt - do I need to add a transition on pressed and focused states to solve this? And on certain sites the nav items jumps a bit in positioning - I assume it has to do with the current state - If I try to delete the current state it always jumps back to it - any recommendation to quickly solve this? Thank you so much

Short video: https://we.tl/t-6lUCkPEwZM

6

So to break it down,

  1. You are correct to assume that to make the transition more smooth on pressed you should play around with the “pressed” state.
  2. The jumping has again to do with the elements positioning in the different states. I am not sure what you mean by trying to delete the current state - please elaborate…
  3. I have noticed that on hover when you mouse over “feed” link the other elements jump slightly - you can fix that by removing unnecessary changes in the hover state - just like you did before…

Also, have a look at this - its a quick lesson on how to work with states