Streaming live at 10am (PST)

Navbar with dropdowns positioning and hover display issues


#1

The last 4 links in my navbar are dropdowns with submenus. I have the navbar itself positioned absolute because it needs to be layered on top of the hero image for an interaction that I’m adding later.

My questions:

  1. How can I get the dropdown menus to appear when you scroll over the trigger links on top – and not be hidden behind the hero – and still display properly? (And how do I do this while still keeping the whole navbar layered over the hero.)

  2. Not related to the dropdown issue, but equally as frustrating, are the top-level links in the menu itself. When rolling over them, how can I get the correct text hover state styling to appear? The text should turn white when you roll over the button area.

The top-level links not only trigger the dropdowns, but are themselves links to other pages in the site.

My share link: https://preview.webflow.com/preview/wss-1194ad?preview=235ee5e06a7342df038c29046497a6ad

Any help is greatly appreciated! I have combed through the forum archives and online tutorials, but have not been able to figure this out. Thanks!


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


#2

@CuriousChip the best way to do this is on the links you want as a dropdown, you should use the dropdown element in webflow. and you can set it to drop down on hover.


#3

Thanks, but I did do that. That’s not the problem.

I used the dropdown elements with added link blocks so I could turn the main index links into clickable links to other pages as well as be triggers for the dropdowns. They are descending, but are hidden behind the hero image.


#4

@CuriousChip I made a clone-able link for you to look at https://webflow.com/website/nav-drop-demo from what I am reading this is what your trying to accomplish.


#5

Thanks for trying to help! But that’s pretty much what I already have. I need the top of the dropdown to also link to another page in the site, as well as trigger the dropdown. I’m trying to recreate the navbar from this unfinished Muse site (if that makes it easier to visualize what I’m trying to do): http://wsstinks.businesscatalyst.com/index.html. I eventually also want to recreate the scroll animation, which is why I need the navbar to stay layered over the hero image.

I do appreciate you trying to help! Thanks.


#6

@CuriousChip OOOOK I got it now. you want not only the link to drop the menu but be clickable to another page I updated the clone for you if you select the link element just like you did the regular links you can select url so that it will be clickable


#7

@CuriousChip I sent you a pm


#8

My hero! Thank you so very, very much!!


#9

@CuriousChip you are very welcome :slight_smile: