HEX
Server: Microsoft-IIS/8.5
System: Windows NT YDAWBH120 6.3 build 9600 (Windows Server 2012 R2 Standard Edition) AMD64
User: tentjecom_web (0)
PHP: 7.4.14
Disabled: NONE
Upload Files
File: D:/HostingSpaces/SBogers33/broosensterck.nl/wwwroot/css/partials/_navigation.sass
/*==========================================================================
  Navigation / Header
  ========================================================================== */

header
  position: relative
  z-index: 4
  background-color: white

  .small-row
    background: linear-gradient(90deg, $blackGradient)
    padding: 12px 0

    .grid-row
      +flex(flex-end, center)

    a
      display: inline-block
      font-size: 0.65rem
      line-height: 1.2
      color: $broosBlue
      text-transform: uppercase
      font-weight: semi-bold()
      text-decoration: none
      margin-right: 30px

      &.no-margin-right
        margin-right: 0

      span
        color: $lightBlue
        display: inline-block
        margin-right: 10px

  .large-row
    padding: 20px 0
    +flex(space-between, center)

    // Main logo
    .logo
      img
        width: 240px
        //max-height: 35px


    /* Navigation
     ========================================================================== */

    nav
      position: relative

      ul
        +flex(flex-end, center)
        list-style: none
        margin: 0
        padding: 0

        li
          margin-right: 45px

          +respond-to-width(1500)
            margin-right: 30px

          a
            display: inline-block
            font-size: 0.9rem
            font-weight: semi-bold()
            line-height: 1.2
            color: $broosBlue
            text-decoration: none
            transition: opacity 0.3s
            font-family: mainFont()

          &:last-of-type
            margin-right: 0

          &:hover
            a
              opacity: 0.6

          &.active
            a
              color: $broosYellow
              opacity: 1

  .shadow
    position: absolute
    left: 0
    bottom: -40px
    width: 100%
    height: 40px
    opacity: 0.4
    background:
      image: url("/img/vertical-gradient.png")
      size: contain

  /* Mobile Navigation
     ========================================================================== */
  +respond-to-width(840)
    display: none