NavBar > Adding Interaction and Underline to prebuilt nav?

I am using the prebuilt Webflow navbar, I wanted to add underline on hover for each link. I found a good tutorial on this but it is building the nav out. Following the tutorial gets finnicky when I tried to add in another nested div to the prebuilt.

I am trying to achieve the look shown on, I like how minimal that hover and interaction works but not sure how to do it using the premade nav. Maybe I should just build the nav out instead? Attached screenshot of current setup but it’s just the basic nav set to absolute positioning so the hero image shows.

[type or paste code here](

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

To mimic the interaction on Shapemaker, you’ll need to add a couple of elements to your nav structure. Each link should be contained in a div (set to position: relative) with a second div (set to position: absolute and aligned to the bottom) inside that will act as the growing underline.

Once you’ve got that setup, you’ll add a hover interaction to the outer div that takes the underline div from a width of 0 to 100% when you hover in, and 100% to 0 when you hover out.

If you run into issues, reply with your read-only link and I can give you some more specific steps to recreate the effect :+1:

1 Like

I tried out what you noted but whenever I try to nest the divs within the prebuilt navigation bar/link blocks it just doesn’t work for me at all.

Then I thought I’ll just build out the link blocks, add the hover interaction, wrap the nav links, nest them inside the prebuilt nav-bar. That has worked except when going to tablet and mobile view, the whole nav link wrap/links are showing along with the hamburger menu. So in tablet view I “hid” the nav link wrap/container. That has seemed to solve the issue.

This should be fine, right? Seems responsive and I haven’t noticed any issue yet but I am still new to Webflow and could be missing something important.

Right now I have the original nav menu wrap from the prebuilt nav hidden in case my experimental one failed/fails.

That should be the correct solution, but without taking a closer look into the project in the Designer I can’t say if there are any ripple effects. That said, if you’re not noticing any issues (and you’ve checked the site in a few browsers and operating systems) then I’d say you’re good to go :tada: