Customize navigation bar on front page only

Hello!

We’d like to customize the navigation bar on our front page so that the text is easier to read. I managed to do this using the plug-in Simple Custom CSS and then realised that the customization was carried on to other pages as well, which is something we’d like to avoid. I’ve been fiddling about with the code using snippets I’ve picked up on the web as well as in this forum, but I can’t seem to make it work the way I want it to. Unfortunately I’m just a beginnner and would like to continue using Simple Custom CSS instead of manipulating the files on our server, so help please?

Here’s our site.
This code here does its job, but on all pages instead of just the front page:

.navbar-header {
	background:white;
  	opacity: 0.8;
}

When I add .home or .page-id-1508 and change the selector of the navbar-header, it negates the customization:

.home#navbar-header {
	background:white;
  	opacity: 0.8;
}

Thank you!
Victoria