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 Shapemaker.co, 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.
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
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
