universalnav.scss

//// Universal Nav
.universal {
  padding: 0;
  position: relative;
  z-index: 100;
  display: none;
  @media screen and (min-width: 768px){
    display: block;
  }
  ul {
    width: 100vw;
  }
  li {
    width: 50%;
    float: left;
    padding-top: 5px;
    height: 40px;
    text-align: center;
    background-color: white;
    @media screen and (min-width: 480px){
      width: 20%;
    }
    a {
      text-transform: uppercase;
      color: grey;
      font-family: 'Quicksand', sans-serif; // google font
      font-weight: 700;
      font-size: 14px;
    }
  }
  
  // HTML below... I think I was using inline styling with some PHP but anyways, here it is
  <nav class="universal container-fluid"> <!-- container-fluid is a bootstrap class -->
			<ul>
				<li>
					<a onMouseOver="this.style.color='#E54125'"
					   onMouseOut="this.style.color='grey'"
					   target="_blank" href="<?php echo esc_url(home_url()); ?>">Richtech</a>
				</li>
				<li>
					<a onMouseOver="this.style.color='#E07A7B'"
					   onMouseOut="this.style.color='grey'"
					   target="_blank" href="http://womenetc.org/">WomenEtc</a>
				</li>
				<li>
					<a onMouseOver="this.style.color='#84D2EF'"
					   onMouseOut="this.style.color='grey'"
					   target="_blank" href="http://www.rvatechjam.com/">TechJam</a>
				</li>
				<li>
					<a onMouseOver="this.style.color='#189579'"
					   onMouseOut="this.style.color='grey'"
					   target="_blank" href="http://richtechgala.com/">TechGala</a>
				</li>
				<li>
					<a onMouseOver="this.style.color='#2888F8'"
					   onMouseOut="this.style.color='grey'"
					   target="_blank" href="http://www.rvatech.org/">RVATech</a>
				</li>
			</ul>
		</nav>
}