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:

body.page-id-44 #ck-header {
background: var(–e-global-color-900a64c);
}

body.page-id-44 #ck-header #ck-button{
}

body.logged-in #ck-header #ck-button{
display: none;
}

body.page-id-44 #ck-header #ck-nav a{
font-size: 20px;
font-weight: bold;
}

body.page-id-35 #ck-header {
background: var(–e-global-color-e1b7f0b);
}