Home page using CSS grid, flexbox and with mobile navigation

Community feedback

• 

  cheg•380

  @chegxPosted almost 2 years ago

  Hi Victor! You could get the navigation links closer to the left if you remove justify-content: center; and add margin-left to navigation links. Also you can get the same shadow-effect if you add box-shadow instead using backdrop-filter.

    .main-nav {
        background-color: rgb(253, 242, 233); /*remove opacity*/
        box-shadow: -10rem 0 rgb(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        transform: translateX(100%);
        display: flex;
        align-items: center;   
        transition: all 0.5s ease-in;
        /* 1) Hide it visually */
        opacity: 0;
        /* 2) Make it unaccesible to mouse and keyboard */
        pointer-events: none;
        /* 3) Hide it from screen readers */
        visibility: hidden;
      }
  
     .main-nav-link:link,  
     .main-nav-link:visited {
        font-size: 1.1rem; */smaller size*/
        margin-left: 2rem;
      }
  

  Marked as helpful

  0