Custom fonts in navigation menu not working for mobile view

Hi!

My custom fonts implemented with CSS are not converting in the mobile view of the menu on my website. Website is not published yet FYI. See attached:

Current code I have is:

//CUSTOM NAVIGATION FONT//

.header-nav-item {
 font-family: 'AvenirPro45Book' !important; 
  font-size:16px; 
  letter-spacing:3px;
  text-transform: uppercase
}

.header-nav-list {
 font-family: 'AvenirPro45Book' !important; 
  font-size:16px; 
  letter-spacing:3px;
  text-transform: uppercase
}

Hello @Lnoon18

you can use this code 

@media (max-width: 799px)
{
.header-menu-nav-item a
{
	font-family: 'AvenirPro45Book' !important; 
  font-size:16px; 
  letter-spacing:3px;
  text-transform: uppercase
}
}

Add Media Query 
 

Thanks so much @LoftyDevsbyWidleStudioLLP!

I have another question for a different site in the nav mobile menu too:

For some reason the nav background colour is transparent. It should be #A2A172. Could you help with this?