Webstudio

Log inLog into community

Join the Webstudio community

Updated 7 months ago

Nav bar

Nav bar

At a glance

A community member is facing an issue with a navbar they created. The navbar has nav items with links and horizontal lines that are initially out of frame. The member wrote a JavaScript snippet to handle mouse enter and exit events to show the lines, but the effect works in the editor but not when published. When exported as static, the site is not broken but the hover line effect doesn't work. The community members tried various approaches, including enabling the client-only flag and republishing, but the issue persisted.

After some discussion, a community member suggested two solutions: 1) using custom CSS to target the nav items, or 2) wrapping the inner contents of each list item with a box or link and applying the styles there. The second approach worked for the original poster. Additionally, the community members discussed an issue with using the Class attribute instead of className on Radix components, which can cause style issues.

There is no explicitly marked answer, but the community members provided helpful suggestions to resolve the issue.

Useful resources

·

Hey Guys! whats up? im facing a little issue. was wondering if anyone else has faced the same problem...

I have made a a navbar, that has nav items, the navitems each have a link and a horizontal line, that is initially out of frame, (overflow=hidden), Ive written a small js snippet that checks for mouse enter and exit, and accordingly the line moves to view.

the problem: This works when i test it on the editor but when i publish it, the site is broken, with the navitems invisible and the lines showning. When i export as static, the site is not broken but the hoverline effect doesnt work.

I'm not sure whats going on here...

B

E

J

31 comments

Did you try to enable client-only flag in html embed with script?

nope. should I?

let me check and revert

tried, same issue. nothing changed

Please send shared link to the project

thanks for being so cool man... here is the link..

https://apps.webstudio.is/builder/0ac68ddf-09e0-4795-8620-c73bb1fd4190?authToken=4dde13f5-437b-45b6-84c1-8d8e440a4637&mode=edit

This is the published link: https://emmanuelpanjacom-9akiw.wstd.io/

@TrySound hey, were you able to find anything?

im super perplexed...

Seems like currentcolor on link published site makes link invisible, our style panel didn't catch it something though

Try to publish again please

just republished however, its the same issue.

@TrySound hey, can you please tell me how i can go forward with this? i'm still unsure as to whats the problem and its resolution. im looking to switch from webflow in the next few weeks but if such issues persist then it'll be difficult to meet my projects on time. please advise.

JJohn Siciliano

Findings...

None of your styles on the menu list items are outputting on the live site. I tried to repro on another and could not.

But, I found on your site you have a custom class on each list item which shouldn't be an issue but then I tried adding a custom class on my site to the list item and it wont let me. @TrySound can you make sense of this? Classes can't be added to any of the children of Radix components that are radix things like triggers and such... native components that are nested work fine. Not sure how he added a class in the first place. I can create a bug if you want to look into it later or maybe its just working as intended.

@Emmanuel you can either use some custom css like

Plain Text

<style>
  .navitem {
    overflow: hidden;
  }
</style>

Or just wrap the inner contents of each list item with a box or link and set your styles there and give that the class to target with your script.

I would go for the second solution as I wouldnt rely on the classes on radix components until that's worked out.

Attachments

JJohn Siciliano

Another option @Emmanuel is to remove the class from the list items as your styles will start to work again and then use a selector like nav .w-menu-item.

PS this has nothing to do with atomic/vs not. I tested

@John Siciliano Thanks John. Let me do this and get back... Realy appreciate the help.

@John Siciliano Hey! the second approach worked! thanks a ton mate.

also, regarding how i input the class, i think in the properties section, if I select the className Attribute, nothing happens but if i type in class with a captial C, it registers...

im not sure if its intended to.

JJohn Siciliano

hahah i was just about to ask how you did it. interesting

JJohn Siciliano

Class is something special in JS so maybe it's interfering with that. className is technically what should be used in react because it conflicts with a JS class

Ahhh i see. yes..

thanks a ton...

We use "Class" alias, so it should work

JJohn Siciliano

it disallows class and className on Radix but lets you use Class and breaks styles.

Additionally, using Class and class (the default prop) on a non radix component is possible (attached)

Attachment

ah, gotcha

JJohn Siciliano

Ill create an issue for this as P2 and just describe what I've seen. I'm sure you can make better sense of the core issue 🙂

hey also, just a quick ask, how would i be able to use a canvas element within a section?

is it possible?

JJohn Siciliano

custom html embed for now

okay. cool. thanks a ton!

Add a reply

Sign up and join the conversation on Discord