I think you guys need a how to video on the new Nav Bar feature. I was hoping to use my existing site and simply move my links into the bar but that seems to be not possible. You also can’t have a transparent background?? I only have like 4 days left on my trial and this was one of the features I was waiting for. Please make a video especially on how to use images as link buttons!
Hi @DFink, sorry about that! The Navbar links required a custom link type separate from the standard link blocks. Hopefully you didn’t have too much re-entry. Also keep in mind that Symbols are just around the corner, which means we hope to eliminate even more copy & paste.
Images are not currently possible to use as link buttons in the navbar. We’ll add this to our list and hopefully have that ready in the next iteration.
Transparent backgrounds are indeed possible. Select the element you’d like to give a transparent background, add a style class and then set the background color to “transparent” like so:
Holy crap! I just logged back in and the ugly gray is gone! I can sacrifice the image link for now in exchange for the responsive navigation. I’ll just have to go through google fonts to find something that fits. Thanks!!
Okay I got rid of the background doing what you said but how do you change the gray color of the actual menu when the dropdown is clicked? Every style on there says transparent. I understand it needs to have some sort of background but I’d like to be able to specify the color.
I also found a bug in the navbar. When I went to change the transparency of the links to 85% and the hover state to 100%, the links get all wacky and jump around horizontally. it does this on the published site too when clicking the links. Please fix this ASAP.
Heres the public link https://webflow.com/design/dfinkdesign1220640?preview=ce4b52f1a0b9fb8c35903136ca09014d
Hi @DFink, to style the Nav Menu, make sure you’re clicking on it instead of the Nav Links. You can get to the Nav Menu by either going to the Navigator, clicking up on your keyboard after clicking the Nav Link to go to its parent or clicking on the icon next to the label. Then you should be able to style the Nav Menu:
I also checked your site: http://dfinkdesign.webflow.com/ and don’t see the hover transparency jumpy issue you’re running into. Is it happening on Chrome or another browser? Can you record a video?
Got it, great tip with the up arrow key. You guys should advertise that to get to the parent. As far as the wacky links I recorded a video. It has to do with the time fading on the over state (the little stopwatch at the bottom) When I add that it keeps doing this on every browser I’ve tried. Also, my trial ends today and I’d like to be able to get this fixed by then to show a potential employer who is interested in purchasing a Team plan if the kinks are worked out.
Heres whats happening when I click the links
That’s really odd @DFink. Are you using Chrome for Webflow? I’m not running into the same problem you are. Maybe setting the transition to be on Opacity ONLY might fix it. Try that.
Also, try restarting Chrome and see if that fixes it. There may be some extensions messing with transitions as well.
Nope, still the same issue. Even if I remove the transition completely, it keeps doing it once it has been applied. The only way to get it to stop is to revert to an earlier version before I added the transition. I am pretty sure this is a bug.
Hmm, that’s odd. Can you do two things to help us find out where this is coming from?
- Send a screenshot of your Chrome Console. Hit CMD+ALT+I in your browser and then hit ESC to open the console. See if anything appears there after you add a transition and hover over it. Show this screenshot after you tried adding it and clicking on it.
- Add the transition that causes problems and publish your site to your subdomain with this change. I want to inspect the code to see if anything buggy is added.
CMD+Shift+I opens up mail with a new message and a link??
I’m sorry it’s CMD+ALT+I.
I am not a big coder so I am not sure what to look for. I selected the navbar link and added the transition. The element is highlighted in the screenshot.
Make sure to click on ESC after you open the Inspector (or click on the Console tab). That will open the console.
Then after you open it, add that transition and click around on the links and see what shows up in the console.
@DFink The reason youre running into this may be because you are choosing
All Properties when adding a Transition. Here’s a similar bug reported on this topic.