0

Here is my codepen: http://codepen.io/beckbeach/pen/jBJByz?editors=1100

I have a navbar that uses Stylus (css). When a child is selected in the nav bar, I want the parent to be underlined. Example: when you hover on About and go into the child menu, I want About to be underlined.

my Stylus:

heading-color = hsl(262, 17%, 24%);
text-color = #7d809f;
accent-color = hsla(349, 85%, 55%, 1);
link-color = #ec1019;
link-color2 = #790000;

* {
  font-family: Helvetica;
}

.theme-a {
  p {
    color: text-color;
  }
  h1, h2, h3, h4, h5, h6 {
    color: heading-color;
  }
  a { 
    color: link-color;
    &:hover {
      color: link-color2;
    }
  }
}

nav {
  @extends .theme-a;
  border-bottom: 1px solid rgba(0,0,0,.0785);
  background: white;
  height: 60px;
  width: 100%;
  display: flex;
  color: link-color;
  padding: 0 30px;
  flex-direction: row;
  justify-contnent: flex-start;
  align-items: center;
  @media screen and (max-width: 1200px) {
    padding-left: calc(((100% - 1200px) / 2) + 30px);
    padding-right: calc(((100% - 1200px) / 2) + 30px);
  }
  p {
    margin: 0;
  }
  a {
    text-decoration: none;
  }
}
.caret {
   position: relative;
  cursor: pointer;
  &:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 8px;
  border-top: 6px solid link-color;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  }
  &:after {
    content: '';
  position: absolute;
  top: 25%;
  left: 9px;
  border-top: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  }
}
// TODO: Cleanup.
.Navbar {
  &_nav-link {
    margin: 0 5rem 0 0;
  }
  &_right {
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    
    * {
      border-top: 18px solid rgba(0,0,0,0);
      border-bottom: 18px solid rgba(0,0,0,0);
    }

    .Dropdown-parent {
      border-top: 18px solid rgba(0,0,0,0);
      border-bottom: 18px solid rgba(0,0,0,0);
      height: 100%;
      margin: 0 5rem 0 0;
      
      .Dropdown-box {
        display: none;
        width: 100%;
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 100;
        background: #f2f2f2;
        padding: 0 0 0 5rem;
      }
      &:hover {
        * {
          border-top: 12px solid rgba(0,0,0,0);
          border-bottom: 12px solid rgba(0,0,0,0);
        }
        > .Dropdown-box {
          display: flex;
          flex-direction: row;
        }
      }
      > .Dropdown-box:hover {
        display: flex;
        flex-direction: row;
      }
    }

  }
}
Beck Beach
  • 77
  • 7

1 Answers1

0

Test this CSS. The problem is height

heading-color = hsl(262, 17%, 24%);
text-color = #7d809f;
accent-color = hsla(349, 85%, 55%, 1);
link-color = #ec1019;
link-color2 = #790000;

* {
  font-family: Helvetica;
}

.theme-a {
  p {
    color: text-color;
  }
  h1, h2, h3, h4, h5, h6 {
    color: heading-color;
  }
  a { 
    color: link-color;
    &:hover {
      color: link-color2;
    }
    &:active {
      text-decoration: underline;
    }
  }
}

nav {
  @extends .theme-a;
  border-bottom: 1px solid rgba(0,0,0,.0785);
  background: white;
  height: 60px;
  width: 100%;
  display: flex;
  color: link-color;
  padding: 0 30px;
  flex-direction: row;
  justify-contnent: flex-start;
  align-items: center;
  @media screen and (max-width: 1200px) {
    padding-left: calc(((100% - 1200px) / 2) + 30px);
    padding-right: calc(((100% - 1200px) / 2) + 30px);
    &:active {
      text-decoration: underline;
    }
  }
  p {
    margin: 0;
  }
  a {
    text-decoration: none;
  }
}
.caret {
   position: relative;
  cursor: pointer;
  &:before {
  content: '';
  position: absolute;
  top: 25%;
  left: 8px;
  border-top: 6px solid link-color;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  }
  &:after {
    content: '';
  position: absolute;
  top: 25%;
  left: 9px;
  border-top: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  }
}
// TODO: Cleanup.
.Navbar {
  &_nav-link {
    margin: 0 5rem 0 0;
  }
  &_right {
    display: flex;
    flex-direction: row;
    margin: 0 auto;

    * {
      border-top: 18px solid rgba(0,0,0,0);
      border-bottom: 18px solid rgba(0,0,0,0);
    }

    .Dropdown-parent {
      border-top: 18px solid rgba(0,0,0,0);
      border-bottom: 18px solid rgba(0,0,0,0);
      height: 100%;
      margin: 0 5rem 0 0;

      .Dropdown-box {
        display: none;
        width: 100%;
        position: absolute;
        top: 55px;
        left: 0;
        z-index: 100;
        background: #f2f2f2;
        padding: 0 0 0 5rem;
      }
      &:hover {
        * {
          border-top: 12px solid rgba(0,0,0,0);
          border-bottom: 12px solid rgba(0,0,0,0);
          height: 50px;
        }
        > .Dropdown-box {
          display: flex;
          flex-direction: row;
        }
      }
      > .Dropdown-box:hover {
        display: flex;
        flex-direction: row;
      }
    }

  }
}
Christian Carrillo
  • 414
  • 3
  • 8