Let's start with some small changes in the app.component.html template file, which hosts the main skeleton (new/updated lines are highlighted):

<div class='container-fluid'>
    <div class='row'>
        <nav class="navbar header-content">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a [routerLink]="['/home']">
                        <img src="/dist/res/img/logo.svg" 
                         alt="TestMakerFree" />
                    </a>
                </div>
                <quiz-search class="search-header" placeholder="Search 
                 for a quiz..."></quiz-search>
            </div>
        </nav>
    </div>
    <div class='row'>
        <div class='col-sm-3'>
            <nav-menu></nav-menu>
        </div>
        <div class='col-sm-9 body-content'>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

Also, in its LESS style sheet file:

.header-content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    height: 85px;
    background-color: #f4f4f4;
    border-bottom: 1px solid #dedede;

    .navbar-header {
        text-align: left;
    }

    img {
        height: 80px;
        margin: 3px 0 0 8px;
    }
}

.body-content {
    margin-top: 100px;
}

@media (max-width: 767px) {
    .header-content {
        .navbar-header {
            text-align: center;
        }
    }

    .body-content {
        padding-top: 50px;
    }
}

We can easily see that we added a new <div class="row"> element here, which contains some header-related content. Among the sub-elements, there are two new items that we've never seen before; the logo.svg file and the <quiz-search> element, which obviously refers to a QuizSearchComponent that doesn't even exist yet. Worry not, as we'll introduce them both in a short while.