Style Guide

Navigation 

<div class="main-header">
      <header>
          <div class="top-header">
              <nav class="navbar navbar-expand-lg navbar-light">
                  <a class="navbar-brand" href="#">
                      <img src="/images/logo.png" alt="logo">
                  </a>
                  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                      <div class="hamburger" id="hamburger-1">
                          <span class="line"></span>
                          <span class="line"></span>
                          <span class="line"></span>
                      </div>
                  </button>
                  <div class="collapse navbar-collapse" id="navbarNavDropdown">
                      <ul class="navbar-nav">
                          <li class="nav-item dropdown">
                              <a href="https://www.google.org/" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
                                  The Tech Fund
                              </a>
                              <span class="dropItem">

                              </span>
                              <div class="dropdown-menu dropdown-content" aria-labelledby="navbarDropdownMenuLink">
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      About the Fund
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Strategy
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Performance
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Team
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Composition
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Documents
                                  </a>
                              </div>
                          </li>
                          <li class="nav-item dropdown">
                              <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
                                  About BlueBox
                              </a>
                              <span class="dropItem">

                              </span>
                              <div class="dropdown-menu dropdown-content" aria-labelledby="navbarDropdownMenuLink">
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      About the Fund
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Strategy
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Performance
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Team
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Composition
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Documents
                                  </a>
                              </div>
                          </li>
                          <li class="nav-item dropdown">
                              <a href="#" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" aria-haspopup="true" aria-expanded="false">
                                  Contact
                              </a>
                              <span class="dropItem">

                              </span>
                              <div class="dropdown-menu dropdown-content" aria-labelledby="navbarDropdownMenuLink">
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      About the Fund
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Strategy
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Performance
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Team
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Fund Composition
                                  </a>
                                  <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                                      Documents
                                  </a>
                              </div>
                          </li>
                      </ul>
                  </div>

              </nav>
          </div>
      </header>
  </div>
 
<div class="main-header">
    <header>
      <div class="top-header">
        <nav class="navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand" href="{{logo_link}}">
            <img src="{{logo_src}}" alt="logo">
          </a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <div class="hamburger" id="hamburger-1">
              <span class="line"></span>
              <span class="line"></span>
              <span class="line"></span>
            </div>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              {% for item in NavLink %}
                <li class="nav-item dropdown">
                    <a href="{{ item.link }}" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button"
                      aria-haspopup="true" aria-expanded="false">
                      {{item.mainTitle}}
                    </a>
                    <span class="dropItem">
                      {# <img src="/images/arrow.png"> #}
                    </span>
                  <div class="dropdown-menu dropdown-content" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                      About the Fund
                    </a>
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                    Fund Strategy
                    </a>
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                      Performance
                    </a>
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                    Team
                    </a>
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                      Fund Composition
                    </a>
                    <a class="dropdown-item nav-link-item nav-dropdown-item" href="#">
                    Documents
                    </a>
                  </div>
                </li>
              {% endfor %}
            </ul>
          </div>

        </nav>
      </div>
    </header>
  </div>
 
{
  "logo_src": "/images/logo.png",
  "logo_link": "#",
  "NavLink": [
    {
      "item": null,
      "mainTitle": "The Tech Fund",
      "link": "https://www.google.org/"
    },
    {
      "item": null,
      "mainTitle": "About BlueBox",
      "link": "#"
    },
    {
      "item": null,
      "mainTitle": "Contact",
      "link": "#"
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  $(".hamburger").click(function () {
    $(this).toggleClass("is-active");
  });

  $(".nav-item").click(function () {
    $(".nav-item").removeClass("active");
    $(this).addClass("active");
  });

  $(".nav-link-item").click(function () {
    $(".nav-link-item").removeClass("active");
    $(this).addClass("active");
  });
});

$(document).ready(function () {
  var c,
    currentScrollTop = 0,
    navbar = $("header");

  $(window).scroll(function () {
    var a = $(window).scrollTop();
    var b = navbar.height();

    currentScrollTop = a;

    if (c < currentScrollTop && a > b + b) {
      navbar.addClass("scrollUp");
    } else if (c > currentScrollTop && !(a <= b)) {
      navbar.removeClass("scrollUp");
    }
    c = currentScrollTop;
  });
});

$(".nav-item").each(function (event) {
  if ($(this).find(".nav-dropdown-item").length > 0) {
    $(this).addClass("nav-drop-arrow");
  }
});

// $(".nav-item").each(function () {
//   if ($(this).find(".nav-dropdown-item").length > 0) {
//     $(this)
//       .find(".nav-link")
//       .attr("data-bs-toggle", "dropdown");
//   }
// });

if (window.innerWidth < 991) {
  $(".nav-item").each(function () {
    if ($(this).find(".nav-dropdown-item").length > 0) {
      $(this)
        .find(".dropItem")
        .attr("data-bs-toggle", "dropdown");
    }
  });
}
  • URL: /components/raw/navigation/navigation.js
  • Filesystem Path: components/02-layout/navigation/navigation.js
  • Size: 1.4 KB
  • Content: 
    .main-header {
  &::after {
    position: initial !important;
    display: none !important;
    padding-top: 0px !important;
  }
}
header {
  background-color: rgba(41, 35, 92, 0.9);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1111;
  display: flex;
  align-items: center;
  -webkit-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  min-height: 91px;
  @include media-breakpoint-down(md) {
    min-height: 0;
  }
  &.scrollUp {
    transform: translateY(-92px);
  }
  .top-header {
    width: 100%;
    padding: 0 65px;
    @include media-breakpoint-down(xl) {
      padding: 0 30px;
    }
    @include media-breakpoint-down(md) {
      padding: 0 20px;
    }
    .navbar {
      padding: 0;
      @include media-breakpoint-down(lg) {
        padding: 15px 0px;
      }
      .navbar-brand {
        img {
          max-width: 100%;
          height: 60px;
          @include media-breakpoint-down(md) {
            height: 40px;
          }
        }
      }
      .navbar-toggler {
        outline: 0;
        color: transparent;
        #hamburger-1.is-active .line:nth-child(2) {
          opacity: 0;
        }
        #hamburger-1.is-active .line:nth-child(1) {
          -webkit-transform: translateY(9px) rotate(45deg);
          -ms-transform: translateY(9px) rotate(45deg);
          -o-transform: translateY(9px) rotate(45deg);
          transform: translateY(9px) rotate(45deg);
        }
        #hamburger-1.is-active .line:nth-child(3) {
          -webkit-transform: translateY(-7px) rotate(-45deg);
          -ms-transform: translateY(-7px) rotate(-45deg);
          -o-transform: translateY(-7px) rotate(-45deg);
          transform: translateY(-7px) rotate(-45deg);
        }
        .hamburger {
          .line {
            width: 30px;
            height: 2.5px;
            background-color: #fff;
            display: block;
            margin: 5.5px auto;
            -webkit-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
          }
        }
      }
      .navbar-collapse {
        outline: 0;
        .navbar-nav {
          margin-left: auto;
          @include media-breakpoint-down(lg) {
            padding: 47px 0;
            text-align: center;
          }
          .nav-item {
            font-family: "OpenSans-Regular";
            &.active {
              .nav-link {
                color: #37aae1;
              }
            }
            &.nav-drop-arrow {
              .dropdown-toggle {
                &::before {
                  content: "";
                  position: absolute;
                  right: 3px;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                  background-image: url("/images/arrow-white.svg");
                  background-repeat: no-repeat;
                  background-position: center;
                  background-size: 21px;
                  width: 21px;
                  height: 21px;
                  // transition: all 0.10s ease-in-out;
                  @include media-breakpoint-down(lg) {
                    right: 25px;
                    display: none;
                  }
                }
              }
              &.active,
              &:hover {
                .dropdown-toggle {
                  &::before {
                    content: "";
                    background-image: url("/images/arrow-dark.svg");
                    background-size: 22px;
                  }
                }
                .dropItem {
                  background-image: url("/images/arrow-dark.svg");
                }
                .nav-link {
                  color: #37aae1;
                }
              }
            }
            .nav-link {
              color: #fff;
              font-size: 18px;
              font-family: "OpenSans-Regular";
              padding: 35px 30px;
              &:hover {
                color: #37aae1;
              }
              @include media-breakpoint-down(lg) {
                font-size: 20px;
                font-family: "PlayfairDisplay-SemiBold";
                padding: 22px 18px;
              }
            }
            &.dropdown {
              position: relative;
              &:hover .dropdown-menu {
                @include media-breakpoint-up(xl) {
                  display: block;
                }
              }
              .dropdown-toggle {
                position: relative;
                &::after {
                  display: none;
                }
                &.show {
                  @include media-breakpoint-down(lg) {
                    &::before {
                      transform: rotate(-180deg);
                    }
                  }
                }
              }
              .dropdown-menu {
                background-color: rgba(41, 35, 92, 0.9);
                top: 99%;
                right: -25px;
                padding: 30px;
                width: 180px;
                margin-top: 0;
                @include media-breakpoint-down(lg) {
                  background-color: transparent;
                  width: 100%;
                  border: 0;
                  text-align: center;
                  padding: 10px 10px 36px;
                }
                .nav-link-item {
                  color: #fff;
                  font-size: 14px;
                  padding: 0 0 30px;
                  &:last-child {
                    padding-bottom: 0;
                  }
                  &.active {
                    color: #37aae1;
                  }
                  &:hover {
                    color: #37aae1;
                  }
                }
              }
            }
            .dropItem {
              background-image: url("/images/arrow-white.svg");
              position: absolute;
              top: 25px;
              right: 0;
              width: 50px;
              height: 25px;
              background-repeat: no-repeat;
              margin: auto;
              background-position: center;
              cursor: pointer;
              @include media-breakpoint-up(lg) {
                display: none;
              }
              &.show {
                background-image: url("/images/arrow-dark.svg");
                transform: rotate(-180deg);
              }
            }
          }
        }
      }
    }
  }
}
  • URL: /components/raw/navigation/navigation.scss
  • Filesystem Path: components/02-layout/navigation/navigation.scss
  • Size: 6.5 KB

There are no notes for this item.