CSS on if statement Liquid

Highlighted
New Member
3 0 0


See picture attached:download.png

 

So, I'm looking to show a background image on the navbar, only on the pages that aren't the index. I'm using "Brooklyn" and so the index page has a slideshow that falls under the navbar, so it shouldn't have a background.

Unsure of how to achieve this effect. (Also center would be lovely too, i guess, but i can figure that out).
Liquid is... An interesting code to look at, makes it harder for me to find the divs I want to edit, but it's ok.

Anyone able to help?

0 Likes
Highlighted

Hello ,

Can you please share youe site url

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted

for template check use like this:

{% if template == 'index' %}

for page check use like this:

{% if page.handle == 'frontpage' %}

Shopify theme developer and customization

I Would like to add new functionality or customize an existing one, please hire me.
If helpful then please Like and Accept Solution .
Email: ashiquehussaincodediary@gmail.com

0 Likes
Highlighted
New Member
3 0 0

I can't, as i'm still on the trial.
I have limited coding experience although i've never had issues in the past, liquid is something frustrating because it's new and there's much less documentation on it, which i'm sure creates jobs for the shopify guru team ;)

All i wanted was for my home page not to have a 'header' BG, but every other page to have one because they don't have the slideshow behind them and the page looks bland and doesn't style-wise relate back to the home.
EDIT: I'm also then going to have to find where it changes the 'header' text to a different color on the other pages in comparison to the home page, as it's not dark instead of the light that's on the first.

0 Likes
Highlighted
New Member
3 0 0

Figured it out. It was frustrating, but i'll just CSS each page that isn't the index.
download.png

If you know of a slightly better way to do it, please let me know :)

0 Likes
Highlighted
Explorer
45 1 10

You can use the NOT statement:

body:not(.template-index) {

}

This will affect every page except the home page, which has the class "template-index"

0 Likes