My site is urbanfoundation.nationbuilder.com
I am creating a custom theme based on the Aware theme.
Is there a way to apply a change to the header that affects only the Home Page?
To be specific:
- On the home page only, I would like:
.header-container { height: 500px; }
- On all other pages I need the header to be shorter
Yep, this is totally possible.
First, we need a way to identify in layout.html whether or not the current page is the homepage. The way I've done it is to add a "homepage" class to the <body> tag of layout.html, only if a liquid "if" statement to check if the current page is the homepage resolves to be true:
...
<body class="aware-theme v2-theme {{ page.page_class_name }} {% if page.is_homepage? == true %}homepage{% endif %} js">
...
Then, in the css, we can use a selector to declare a style specifically for the .header-container of the homepage, with:
.homepage .header-container { height: 500px; }
This style will override the more general .header-container style:
.header-container { height: 165px; }
which is only effective on non-homepage pages, which don't have a parent with the .homepage class.
Showing 3 reactions
Sign in with