Strategy 1: Hide it with CSS

With CSS, you can visually hide certain elements in the DOM. CSS provides the display property, where you can set it’s value to none. What happens? It removes the HTML element from the visual representation for the web page.

To accomplish this in Genesis, you will want to open up your editor and then do these steps:

1. Open the style.css file
2. Search for the .site-footer { section in the stylesheet
3. Scroll down to the end of that section to place the code after these styles
4. And then put in the following CSS declaration block

body.home .site-footer {
	display: none;
}

Notice that we are targeting the home page specifically by using body.home. Why? Because if we only targeted the .site-footer attribute, it would hide the site footer on all web pages. In other words, doing this:

.site-footer {
	display: none;
}

hides the site footer everywhere for all web pages. But we want only the home page. That’s it.

Theme Version and Browser Caching

At first try, this technique appears not to work. Why? You’ve changed the CSS in the style.css file. Yet, the browser has already cached the previous version of the stylesheet.

The browser caches the stylesheet. Therefore, when you looked at the web page before making the change, the original stylesheet is cached. Your changes will not appear in the browser.

What do you do? You need to change the Theme’s version. For more information, see this hands-on lab:

4 Episodes
00:15:48 Runtime

Genesis Version - Ensure Your Latest Changes Go Out to the Browser

Have you ever had the problem where you made a change, pushed it to your client's server, and then they say they can't see the changes? So you tell them to clear their browser's cache and that solves the problem. In this lab, you will learn how to make sure your changes are sent out to the browser using the constant Genesis provides for you.

Learn more

Pros and Cons as well as When to Use this Approach

As I mentioned above, the CSS is only hiding the visual representation of the element. However, it remains in the HTML markup, i.e. the DOM. Therefore, folks reading the page with a screen reader will read it. Web crawlers can read it. Why?

Because it’s not been removed from the HTML markup. No, it’s still there. All the CSS did is hide it from the visual.

When a sighted person looks at the web page, they do not see it. But the site footer is still there.

Therefore, this approach is only useful when you want that behavior. You want to only hide it for sighted readers. You want to it from the visual view. But you want it there for web crawlers, readers, and other HTML reading applications.

Most of the time, this is not the strategy that you want. Instead, you want to completely remove the site footer component from the visual and HTML markup.