Smart WordPress headers using CSS and Elementor Pro

Learn how to build smart headers for your WordPress website using CSS and Elementor Pro. Go beyond the ordinary Elementor customisation.
This snippet requires the following Themes/Plugins/Services/Tools:
  • Page ID and Global variable names will be different on your website
  • Inspect as shown in the tutorial and replace those appropriately in the code snippet below
  • Also if you change or use different class names or IDs for your elements replace them in the code snippets below as well
  • Don’t forget to publish your changes and purge cache if necessary
Copy the snippet from below: #ck-header {
background: var(–e-global-color-900a64c);
} #ck-header #ck-button{

body.logged-in #ck-header #ck-button{
display: none;
} #ck-header #ck-nav a{
font-size: 20px;
font-weight: bold;
} #ck-header {
background: var(–e-global-color-e1b7f0b);


Learn Elementor Custom CSS from the scratch. Up your Web Design game!