The size of the line isn’t spousing the size of the text button
This is because your div that’s wrapping the underline element and nav link has a position property of static:
Elements set to position: absolute size themselves relative to the nearest parent that has its position property set to anything other than static — in your case that’s the Nav Menu. Setting the position property of that wrapper div to relative will fix the issue.
I cannot set the Nav Link as parent of the Div Block
I’m not sure what you mean but hopefully my explanation above helps answer this one.
The Hover only works on the new Div Block and not the text iself, is this something we can choose to set up?
Since your nav link class has left and right margin (to push it away from other links) it’s creating extra space within the wrapping div. Since all of your links will have this setup, I’d recommend moving the margin to the wrapper instead and removing it from the nav link — this will shrink the trigger to only the size of your text and have the added benefit of shrinking the underline as well.
That should fix the issues you mentioned, but I’ve got a couple of extra notes:
Your manually adding a class for the active state of your nav link, but Webflow does this automatically. As soon as you set a destination for the link, navigating to that destination page will show a green Current class selector for that specific link that can be used to style the active state.
Since you’re setting up a fairly complex interaction involving a group of elements that will be used for multiple links, I’d recommend setting it up as a Component. If you’re not familiar, you can read a bit more about it below:
It’s definitely a more advanced solution, but it will allow you to easily duplicate that interaction not only within your nav, but also anywhere else you’d like to use it within the site. The text and link properties can be set per instance, and if you ever want to make a change to the effect you can update the structure of the main Component and it will update all instances you’ve used on any page.
Hopefully that helps but don’t hesitate to reach out if you have any other questions or run into any issues