T Capital

Header 

<header class="site-header dynamic">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <div class="d-flex justify-content-between align-items-center position-relative">
                    <a class="header-logo" href="/"></a>
                    <nav class="main-nav d-none d-lg-flex">
                        <a class="active" href="/">Investment Strategies</a>
                        <a class="" href="/">Portfolio</a>
                        <a class="" href="/">Team</a>
                        <a class="" href="/">News</a>
                    </nav>
                    <a href="#" class="burger d-block d-lg-none">
                        <div class="line"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-nav d-block d-lg-none">
        <div class="inner">
            <nav class="">
                <a class="active" href="/">Investment Strategies</a>
                <a class="" href="/">Portfolio</a>
                <a class="" href="/">Team</a>
                <a class="" href="/">News</a>
            </nav>
        </div>
    </div>
</header>
 
<header class="site-header dynamic">
    <div class="container-xxl">
        <div class="row">
            <div class="col-xl-10 offset-xl-1">
                <div class="d-flex justify-content-between align-items-center position-relative">
                    <a class="header-logo" href="{{ homelink }}"></a>
                    {{#if links}}
                        <nav class="main-nav d-none d-lg-flex">
                            {{#each links}}
                                <a class="{{ active-class }}" href="{{ url }}">{{ text }}</a>
                            {{/each}}
                        </nav>
                    {{/if}}
                    <a href="#" class="burger d-block d-lg-none">
                        <div class="line"></div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="mobile-nav d-block d-lg-none">
        <div class="inner">
            {{#if links}}
                <nav class="">
                    {{#each links}}
                        <a class="{{ active-class }}" href="{{ url }}">{{ text }}</a>
                    {{/each}}
                </nav>
            {{/if}}
        </div>
    </div>
</header>
 
{
  "homelink": "/",
  "links": [
    {
      "text": "Investment Strategies",
      "url": "/",
      "active-class": "active"
    },
    {
      "text": "Portfolio",
      "url": "/",
      "active-class": ""
    },
    {
      "text": "Team",
      "url": "/",
      "active-class": ""
    },
    {
      "text": "News",
      "url": "/",
      "active-class": ""
    }
  ]
}
  • Content: 
    //  header

const header = {
    init() {
        if (!document.querySelector('.site-header')) {
            return;
        }
        let header = document.querySelector('.site-header');
        let lastScrollTop = 0;
        window.addEventListener('scroll', function() {
            const st = window.scrollY || document.documentElement.scrollTop;
            if (st < lastScrollTop && st > 100) {
                header.classList.add('up');
                header.classList.remove('down');
            } else if (st > lastScrollTop && st > 100) {
                header.classList.add('down');
                header.classList.remove('up');
            } else if (st <= 100) {
                header.classList.remove('up');
                header.classList.remove('down');
            } 
            lastScrollTop = st <= 0 ? 0 : st; // avoid negative values on iOS
        }, { passive: true });

        let burger = document.querySelector('.burger');
        let siteHeader = document.querySelector('.site-header');

        burger.addEventListener('click', (e) => {
            e.preventDefault();
            if(siteHeader.classList.contains('menu-open')){
                siteHeader.classList.remove('menu-open');
                //document.body.classList.remove('no-scroll');
            } else{
                siteHeader.classList.add('menu-open');
                //document.body.classList.add('no-scroll');
            }
        }); 



    }
};
header.init();
export default header;
  • URL: /components/raw/header/header.js
  • Filesystem Path: src/components/01-global/header/header.js
  • Size: 1.5 KB
  • Content: 
    //  header

header{
    &.site-header{
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        transition: all 0.5s;
        padding: 3rem 0;
        &:after{
            content: '';
            width: 100%;
            height: 100%;
            background-color: $black;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            pointer-events: none;
            opacity: 0;
            transition: all 0.4s;
        }
        &.up{
            top: 0;
            padding: 2rem 0;
            &:after{
                opacity: 1;
            }
            .header-logo{
                width: 125px;
                transition: none;
            }
        }
        &.down{
            top: -100px;
        }
        .header-logo{
            display: block;
            aspect-ratio: 4/1;
            width: 150px;
            transition: all 0.4s;
            transition-delay: 0.2s;
            position: relative;
            z-index: 2;
            @include media-breakpoint-up(md){
                width: 185px;
            }
            background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='443.089mm' height='105.682mm' viewBox='0 0 1256 299.572'%3E%3Cg id='a' data-name='Wortmarke'%3E%3Cg%3E%3Cpath d='M413.185,30.42c42.313,0,74.765,27.679,80.809,72.537h-44.858c-4.772-21.952-19.407-31.179-35.951-31.179-29.269,0-45.495,24.18-45.495,69.992s16.226,69.992,45.495,69.992c16.544,0,31.179-9.227,35.951-31.179h44.858c-6.044,44.859-38.496,72.538-80.809,72.538-57.584,0-90.035-42.95-90.035-111.352s32.451-111.351,90.035-111.351Z' fill='%23e20074'/%3E%3Cpath d='M652.474,216.853v28.952c-4.772,2.545-13.362,4.136-19.407,4.136-12.09,0-26.406-4.772-30.542-19.407h-1.591c-9.226,14.316-24.498,20.68-41.677,20.68-29.27,0-46.449-17.18-46.449-45.177,0-36.269,32.769-53.448,77.31-53.448h8.271v-6.045c0-14.953-6.681-23.861-21.952-23.861-11.771,0-18.134,6.999-20.043,16.544h-39.132c3.182-31.179,26.724-49.631,59.175-49.631,40.723,0,62.039,23.861,62.039,59.812v59.175c0,6.363,3.182,9.227,7.636,9.227,2.863,0,4.772-.318,6.363-.955Zm-82.4,3.818c18.134,0,28.315-14.953,28.315-33.087v-7.317h-8.271c-25.134,0-38.178,7.317-38.178,22.588,0,11.135,8.272,17.816,18.134,17.816Z' fill='%23e20074'/%3E%3Cpath d='M817.275,171.359c0,49.631-20.998,81.764-58.539,81.764-18.771,0-31.815-8.591-39.45-20.68h-1.909v67.129h-41.041V94.685h38.496v19.726h1.909c7.636-14.316,20.998-24.815,41.996-24.815,37.541,0,58.539,31.814,58.539,81.764Zm-41.677,0c0-28.634-9.544-44.223-29.269-44.223s-29.27,15.907-29.27,44.223,9.544,44.222,29.27,44.222,29.269-15.589,29.269-44.222Z' fill='%23e20074'/%3E%3Cpath d='M843.956,72.097V35.51h41.041v36.587h-41.041Zm0,175.935V94.685h41.041V248.031h-41.041Z' fill='%23e20074'/%3E%3Cpath d='M934.037,202.855v-73.174h-26.088v-34.996h26.088v-24.814l33.405-30.86h7.636v55.675h39.132v34.996h-39.132v68.084c0,11.453,6.681,17.498,18.452,17.498,6.045,0,12.09-.955,17.498-2.228v32.133c-8.59,3.817-17.816,5.408-29.27,5.408-28.315,0-47.722-16.543-47.722-47.722Z' fill='%23e20074'/%3E%3Cpath d='M1171.736,216.853v28.952c-4.772,2.545-13.362,4.136-19.407,4.136-12.089,0-26.406-4.772-30.542-19.407h-1.591c-9.226,14.316-24.497,20.68-41.677,20.68-29.27,0-46.449-17.18-46.449-45.177,0-36.269,32.769-53.448,77.31-53.448h8.271v-6.045c0-14.953-6.681-23.861-21.952-23.861-11.771,0-18.134,6.999-20.043,16.544h-39.132c3.182-31.179,26.725-49.631,59.175-49.631,40.723,0,62.039,23.861,62.039,59.812v59.175c0,6.363,3.181,9.227,7.635,9.227,2.863,0,4.772-.318,6.363-.955Zm-82.399,3.818c18.134,0,28.314-14.953,28.314-33.087v-7.317h-8.271c-25.134,0-38.178,7.317-38.178,22.588,0,11.135,8.271,17.816,18.135,17.816Z' fill='%23e20074'/%3E%3Cpath d='M1234.684,204.127c0,7.317,3.818,11.453,9.863,11.453,3.817,0,7.953-.636,11.453-1.591v32.451c-5.409,2.228-13.044,4.136-21.316,4.136-26.724,0-41.04-15.271-41.04-40.086V35.51h41.04V204.127Z' fill='%23e20074'/%3E%3C/g%3E%3C/g%3E%3Cg id='b' data-name='Telekom Logo'%3E%3Cpath d='M56.693,187.087H0v-56.693H56.693v56.693ZM0,0V96.378H17.008v-2.835c0-45.354,25.512-73.701,73.701-73.701h2.835V223.937c0,28.346-11.339,39.685-39.685,39.685h-8.504v19.843H192.756v-19.843h-8.504c-28.346,0-39.685-11.339-39.685-39.685V19.843s2.835,0,2.835,0c48.189,0,73.701,28.346,73.701,73.701v2.835h17.008V0H0ZM181.417,187.087h56.693v-56.693h-56.693v56.693Z' fill='%23e20074'/%3E%3C/g%3E%3C/svg%3E");
            background-size: contain;
            background-repeat: no-repeat;
        }
        nav{
            &.main-nav{
                position: relative;
                z-index: 2;
                a{
                    color: $white;
                    text-decoration: none;
                    display: block;
                    padding: 0 1.6rem;
                    position: relative;
                    &:after{
                        content: '';
                        height: 2px;
                        width: 0;
                        background-color: $white;
                        position: absolute;
                        left: 50%;
                        bottom: -2px;
                        transition: all 0.2s;
                    }
                    &:hover{
                        &:after{
                            width: calc(100% - 3rem);
                            left: 1.5rem;
                        }
                    }
                    &.active{
                        &:after{
                            width: calc(100% - 3rem);
                            left: 1.5rem;
                            background-color: $pink;
                        }
                    }
                }
            }
        }
        .burger{
            position: absolute;
            z-index: 2;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            .line, &:before, &:after{
                width: calc(100% - 6px);
                height: 2px;
                background-color: $pink;
                position: absolute;
                left: 3px;
                transition: all 0.4s;
                pointer-events: none;
            }
            .line{
                top: calc(50% - 1px);
            }
            &:before{
                content: '';
                top: 20%;
            }
            &:after{
                content: '';
                bottom: 20%;
            }
        }
        .mobile-nav{
            width: 100%;
            height: 100vh;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: $black;
            transition: all 0.8s;
            top: -100vh;
            opacity: 0;
            .inner{
                padding: 12rem 2rem 2rem 2rem;
            }
            nav{
                a{
                    display: block;
                    color: $pink;
                    text-decoration: none;
                    font-family: $boldfont;
                    font-weight: 700;
                    font-size: 2.5rem;
                    &.active{
                        color: $white;
                    }
                }
            }
        }
        &.menu-open{
            top: 0;
            &:after{
                opacity: 1;
            }
            .burger{
                .line{
                    width: 0;
                    left: 50%;
                }
                &:before, &:after{
                    transition-delay: 0.2s;
                    
                }
                &:before{
                    transform: rotate(45deg);
                    top: 19px;
                }
                &:after{
                    transform: rotate(-45deg);
                    bottom: 19px;
                }
            }
            .mobile-nav{
                top: 0;
                opacity: 1;
            }
        }
    }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/01-global/header/header.scss
  • Size: 8 KB

No notes defined.