Hi,
I am not able to style the underline element below the navbar link. but was able to do the same in the dropdown link in the nav bar. Can someone help in resolving this issue?
Here is my site Read-Only: Webflow - Sarthak's Dynamite Site
Hi Sarthak, not sure what you’re trying to do in terms of styling;
You have the underline as a DIV currently within the menu item?
@memetican (the underline-text is for dropdown element - “FEATURES” and “FOR INDIVIDUALS”)
but not able to include underline-text(Div block) for other nav-link which is not Dropdown element.(Here nav link is “For Teams”).
Do you know the way to fix this?
Correct, they are not compound elements in the same way.
I personally wouldn’t use a DIV element to represent the underline?
Just use styling and use e.g. a border-bottom.
@memetican Thanks for taking time out to make the video. It was really helpful. I have one follow up question. Is there any way I can align borders based on heading of nav link. I see in the video borders length are larger than headings of nav link?
You can just remove your left and right padding, but then the menu items will have very small click areas. I imagine that would be an awkward UX.
yes, Ï try to do that on the “navbar link” but it doesn’t look good. is there any other way we can make border aligned with text?
hi @Sarthak_Jain another option how to is to use custom CSS with ::before IMO it is the way it should be done anyway.
1 Like
@Stan. I am relatively new to webflow. So I don’t know to do this in CSS and also I can’t use custom code/css as I am using free version of webflow.
Great solution Stan, no SVGs, no JS… slick!
1 Like
@Stan . Can you have a look why this custom CSS is not working for me for the border. I have shared the link
hi @Sarthak_Jain my suggestion is you use invalid CSS selectors. Capital letters are not allowed in CSS selectors. You can argue that WF allows naming CSS selectors with wrong semantics (classes with capital letters and breaks between words) into a input field and other companies recommend it as best practice, but it is IMO wrong.
if you do not have further question related to this request feel free to close it
1 Like
Hi Stan,
Thank you so much. Now its working.