<div class="container">
    <header class="border-bottom lh-1 py-3">
        <div class="row flex-nowrap justify-content-center align-items-center">

            <div class="col-4 text-center">
                <a class="blog-header-logo text-body-emphasis text-decoration-none" href="{{ route('front.home') }}">
                    <span class="fw-bolder fs-3">EchoScoop</span>
                </a>
            </div>
        </div>
    </header>

    <div class="nav-scroller py-1 mb-3 border-bottom">
        <nav class="nav nav-underline justify-content-between">
            @foreach ($parent_categories as $category)
                <a class="fw-bold nav-item nav-link link-body-emphasis {{ active(route('front.category', ['category_slug' => $category->slug])) }}"
                    href="{{ route('front.category', ['category_slug' => $category->slug]) }}">{{ $category->short_name }}</a>
            @endforeach
        </nav>
    </div>
</div>
