Drop down nav menu not adhering to placement

i have a nice left-bottom rounded corner in my menu bar. switch to the drop down type. sadly, it slides out from below the corner. sad. oh well! there’s CSS. i re-position the menu to be -10px, and index of -1 to be behind the menubar. nope… the same. is it ignoring these settings? this a bug? also noticed, all interactivity is now gone (can’t rollover or select any menu items).

hopefully, the screenshots illustrate things more clearly:

setup:

preview:

Hi @rps, could you also help to share the read-only link to the site? I have temporarily set the post to invisible.

Also, could confirm, is this happening on the menu on the home page?

Thanks in advance!

hello. there is no menu on the home page.

here is the share link: https://preview.webflow.com/preview/k3dproto?preview=695d70903e58f8e829ae9fc17a918c69

here is the live page in question, the problem menu only shows for tablets and landscape mobile:
http://k3dproto.webflow.io/my-page

Hey @rps, sorry for the delay, is the main issue you are trying to accomplish is to have the menu drop with the rounded left corner? I can see you have the rounded left corner on the navbar, and the navmenu.

When the menu opens, are you just trying to prevent the little white spot on the rounded portion from showing on the navbar when the menu is dropped?

I would apply the rounding to the navmenu when it is in the open state, and it should look aligned. After I remove the border radius on the navbar, it looks a lot better.

See my attached gif: Screen Recording 2016-11-12...

I am not sure if I completely understand the issue, so please let me know if I have misunderstood this case.

Thanks, I will be standing by for your response.

hello,
thanks for the help! the problem is, i’d like to keep the corner, and as it shows in the “setup,” when i click “open menu” for the navbar in the webflow environment, it looks just like that; exactly as expected. however, in “toggle preview” or the live site, that area is suddenly white, and the extended dark gray menu area no longer shows through.

the aim is to keep the lower left rounded area. the problem is, it previews fine in webflow work environment, but not in the actual site. not sure how better to describe it, other then it seems like the div background goes “opaque” when it’s previewed, but has the expected background transparency when in the designer.

Hi @rps, Thanks for the info, are you trying to create something like this:

https://cl.ly/1y410R0e1D2f/Screen%20Recording%202016-11-18%20at%2006.10%20PM.gif

Thanks in advance.

Regards,
Dave

the “setup” image above is exactly what i want. and, it looks exactly like that in the webflow designer. but, when i go to the actual published site, the menubar then has a white background, somehow. as the designer and published sites show different things, i don’t know what to do. thus, this is in the bugs section.

i don’t know what to say, other than please look closer at the existing setup. again, this is only for the vertical tablet design. if you toggle the “open menu” button under navbar settings, it looks just fine. but, if you “toggle preview” then the white background suddenly appears.

to make it super clear, i tried making a screen recording. hosting on dropbox, hope this works for you:
https://dl.dropboxusercontent.com/u/31394273/menu%20problem%20demo%20web-desktop.m4v

Thanks @rps I am looking at this, will get back to you once I have a further look. Thanks for the video, it really helps!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.