Sunnyside Agency (HTML, SCSS, JS)

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hey Jem0, you actually don't need to use a filter. The logo and icons are SVGs, and so I did was I just copied the SVG code in the file and then pasted it into the HTML. They should look something like this:

  <svg>
    <path fill="#FFFFFF" d=".....">
  </svg>
  

  Once you do that, you can change the fill color using CSS.

  For the triangle in your mobile menu, here's what I did for my CSS:

  .nav-header {
    align-items: flex-end;
    position: relative;
  }
  .nav-header .nav__inner {
    display: none;
    background-color: var(--clr-white);
    position: absolute;
    right: 0;
    top: 4.7rem;
    width: calc(100vw - var(--pad-header) * 2);
    height: 19.1rem;
  }
  .nav-header .nav__inner.open {
    display: block;
  }
  .nav-header .nav__inner:before {
    content: "";
    margin-left: auto;
    position: relative;
    top: -1.5rem;
    border-width: 0 0 1.5rem 1.5rem;
    border-style: solid;
    border-color: var(--clr-white) transparent;
    display: block;
    width: 0;
  }
  

  My HTML is like this:

  <nav class="nav-header" aria-label="navigation-header">
    <div class="nav__inner" id="navEl">
      <ul class="nav__items / list-style-none fs-nav-header">
        <li class="nav__items-link"><a href="#">About</a></li>
        <li class="nav__items-link"><a href="#">Services</a></li>
        <li class="nav__items-link"><a href="#">Projects</a></li>
        <li class="nav__items-cta"><button class="button">Contact</button></li>
      </ul>
    </div>
    ...
  </nav>
  
  

  You can have a look at my solution for the challenge here.

  Hope this helps!

  Marked as helpful

  0