As a CSS novice, I've encountered an issue with my Bourbon Refills horizontal navigation bar in my application. The problem is that on the homepage, the navbar is semi-transparent and shows the background image, but I want it to be a different color on all other views (for instance, black instead of transparent). However, I don't know how to achieve this without duplicating the navbar code. There must be a more efficient solution. Currently, I include the navbar in my index.html.erb file as a partial
<%= render 'partials/navbar' %>navbar.scss:
header.navigation {
/* Variables */
}
_navbar.html.erb:
<header class="navigation" role="banner">
<div class="navigation-wrapper">
<a href="#" class="logo">
<!-- Image goes here -->
</a>
<a href="#" class="navigation-menu-button" id="js-mobile-menu">MENU</a>
<nav role="navigation">
<ul id="js-navigation-menu" class="navigation-menu">
<!-- Menu items go here -->
</ul>
</nav>
</div>
</header>