• 1 min read

Using Custom CSS to Hide Template Header and Footer on a page in Elementor

Template Header and Footer are set to show on all pages with Elementor. While there is not setting to toggle it on/off. It is possible to hide using a single line of CSS

Using Custom CSS to Hide Template Header and Footer on a page in Elementor
Photo by Sarah Dorweiler / Unsplash

Custom ID

add via Elementor Header/Footer Editor

  1. Select the Whole Section
  2. In the sidebar, Advanced->Advanced->CSS ID
  3. set "custom-header" for the header; set "custom-footer" for the footer

Code

in the page's Elemenotr editing view, Settings(left bottom corner)->Advanced->Custom CSS, add the following code to hide both header and footer

#custom-header,
#custom-footer {
    display:none;
}