The Challenge

Let's break down this job:

1. Allow the image banner to go under the navigation bar
2. Make the navigation bar background transparence
3. Change the color of fonts and icons in the navigation bar to white

Original design

To find the file go to: assets>base.css

                  
/* Main Header Layout */
.header-wrapper {
  display: block;
  position: relative;
  background-color: rgb(var(--color-background));
}

.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.2);
}

.header {
  display: grid;
  grid-template-areas: 'left-icon heading icons';
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  background-color: rgb(var(--color-background));
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.header__menu-item {
  padding: 1.2rem;
  text-decoration: none;
  color: rgba(var(--color-foreground), 0.75);
}

.header__menu-item:hover {
  color: rgb(var(--color-foreground));
}

.header__active-menu-item {
  transition: text-decoration-thickness var(--duration-short) ease;
  color: rgb(var(--color-foreground));
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}
                  
                

The Solution

To find the file go to: assets>base.css

                  
/* Main Header Layout */
/* Allow the background image to go under the navigation bar  */
/* Convert the background color of the navigation bar to transparence */
.header-wrapper {
  position: fixed !important;
  background-color: rgba(250, 250, 250, 0) !important;
  width: 100%;
}

/* Convert the background color of the navigation bar to transparence */
.header{
  /* background-color: rgba(250, 250, 250, 0.3) !important; */
  background-color: rgba(250, 250, 250, 0) !important;
  color: white;
}

/* Convert the background color of the navigation bar to transparence */
.header-wrapper--border-bottom {
  border-bottom: 0.1rem solid rgba(250, 250, 250, 0) !important;
}

/* Change the color of fonts in the navigation bar to white */
.header__menu-item,
.header__menu-item:hover {
  color: white;
}

/* Header icons */
/* Change the color of icons in the navigation bar to white */
.header__icon {
  color: white;
}

/* header menu */
/* Change the color of fonts in the navigation bar to white */
.header__active-menu-item {
  color: white;
}