menus - Header style different on home and remaining pages

Would it be fairly simple to add different site header and menu styles and assign them to specific pages? I have very basic understanding of how CSS and php work and managed to customise the theme but this is way over my capabilities. Could someone tell what code to add where so I get header and main menu:

1. on HOME - white site title, description and menu on black background,
2. on other pages - black site title, description and menu on white background?

Would it be fairly simple to add different site header and menu styles and assign them to specific pages? I have very basic understanding of how CSS and php work and managed to customise the theme but this is way over my capabilities. Could someone tell what code to add where so I get header and main menu:

1. on HOME - white site title, description and menu on black background,
2. on other pages - black site title, description and menu on white background?

• menus
• title
• headers
• description

Share Improve this question edited Dec 21, 2018 at 8:14 bueltge 17.1k77 gold badges6262 silver badges9797 bronze badges asked Dec 21, 2018 at 4:23 el Huzarel Huzar 1333 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

There are multiple ways to accomplish this. You could create a unique page template, enqueue a stylesheet just for the homepage, or use a unique class on the homepage.

This is probably the simplest.

If you inspect your homepage with the browser (press f12) and look at the body tag, you will notice WordPress is adding a .home class. You can use this to apply different styles that will only effect things on the homepage.

Here are a few examples based off what you were asking for.

.home .site-branding {
    background-color: #000;
}

.home .site-title a, 
.home .site-description {
    color: #fff;
}

I would recommend styling all the other pages how you want them and then using the .home class to change things on the homepage, like the above example. But you could do the opposite and target pages that do not have the .home class on the body.

For example...

body:not(.home) .site-branding {
    background-color: #fff;
} 

Note: Take a look a the body class on different pages, WP adds a unique class for pages, posts, templates, etc. to make things like this easy.