Chaning CSS for Home Page Only | Shopify

[miansaima]

I'm using Shopify to build out my website and I like the home page nav how it is, but I'd like to change the other pages nav bar to 100% width. Since they all share the same code I know I'll have to build out an if statement, I'm just not familiar enough with Shopify to build it out. Source

{%if page.handle == "Home page"%}
.page-width {
margin: 0 auto;
padding-left: 15px;
padding-right: 15px;
}
{% endif %}

Here is the code I was working with that doesn't work. I was just seeing if I could get the if statement to work but I could not.

[ThomasBorowski]

Without seeing your shop I can't say if that CSS code will work or not, but the Liquid if statement will definitely not work. If you want to insert the CSS on the homepage only you would have to use something like this:

{% if template == "index" %}
...CSS code...
{% endif %}

The page.handle is the internal URL-encoded title of a page, e. g. if the title is "FAQ Page", the handle would be "faq-page" (if the auto-generated handle wasn't manually modified). The page Liquid object also only applies to actual Pages, the things you can find under Online store > Pages. So that code would not work on the homepage because the page object isn't set in that case because the homepage isn't a Page.