By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Wordpress and Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!

CSS Selector for horizontal line of a divider widget?

M

Mike_Rodgers

New Member
I have a question about selecting or defining a CSS selector for the horizontal line in an Elementor divider widget. First of all, is this possible? I have tried standard selectors (div, hr, etc.) in addition to defining specific class and ID names (eg., my-class, my-id, etc.) and then using these definitions as selectors in CSS, but none of this works. What I would like to do is to have a divider line color change during scroll for use with a CSS sticky header. Does anyone have any ideas of how I might do this? Thank you!
 
S

Stefan

New Member
Hey, have you tried?

selector {

}


or

selector .xyz {

}

*xyz = class name

Best regards
 
S

Stefan

New Member
Or create it with an "html" Widget inside of Elementor.

HTML:
<hr>

CSS:
selector {
display: block; height: 1px;
border: 0; border-top: 1px solid black;
margin: 1em 0; padding: 0; }
}
 
M

Mike_Rodgers

New Member
Thank you, yes, I tried applying the class name “my-class” and used “selector .my-class {color: lightblue}” in the Custom CSS field. But that did not work (nor did using “my-id” and “selector #my-id”). I’ve begun to think that the line used by the divider widget is not HTML but some other language that cannot be styled with CSS.

I just tried the HTML widget with <hr>, and of course that works perfectly well. Not sure why I didn’t think of that sooner. Anyway, thank you!
 

Latest Resources

Other Elementor Resources

elementor official
Top