Fixed dropdown menu background being the same as navigation bar now

Author: monty2464

src/pages/general/navigation/Navigation.tsx

@@ -63,7 +63,9 @@ const Navigation = (): React.ReactElement => {
 
 				<Navbar.Toggle aria-controls='basic-navbar-nav' />
 				<Navbar.Collapse className='basic-navbar-links'>
-					<Styles.NavbarLinks variant='pills' toggle={width < Constants.MOBILE_SIZE ? 1 : 0}>
+					<Styles.NavbarLinks variant='pills' 
+						toggle={width < Constants.MOBILE_SIZE ? 1 : 0}
+						transparency={scroll <= 10 && width > Constants.MOBILE_SIZE ? 1 : 0}>
 						<NavLink eventKey='1' as={Link} to={Constants.PATHS.HOME} onClick={scrollToTop}>Home</NavLink>
 						<NavLink eventKey='2' as={Link} to={Constants.PATHS.EVENTS} onClick={scrollToTop}>Events</NavLink>
 						<NavLink eventKey='3' as={Link} to={Constants.PATHS.SPONSORS} onClick={scrollToTop}>Sponsors</NavLink>

src/pages/general/navigation/NavigationStyles.tsx

@@ -94,14 +94,14 @@ export default class NavigationStyles {
 
 		.dropdown-menu {
 			position: absolute;
-			background-color: ${COLORS.PRIMARY} !important;
+			background-color: ${props => props.transparency ? 'transparent' : `${COLORS.PRIMARY}`} !important; //fix background later
+			transition: background-color 0.5s;
 			padding: 0px 8px 8px 16px;
 			border: none;
 		}
 
 		.dropdown-item {
 			color: ${COLORS.TEXT} !important;
-			background-color: ${props => props.toggle ? `${COLORS.SELECTED}` : 'transparent'} !important;
 			font-size: 15px;
 			border: none;
 			padding: 0px