Page header Beets Exclusive

About

The page header is used together with flexbox to align the content to your liking.

Example

The example below makes use of flexbox to align content and display classes to show and hide elements responsively.

• Large screen
• Search field to the left
• User account dropdown (with full name) to the right
• Small screen screen
• Sidebar toggle button to the left
• Logotype in the middle
• User account dropdown (without full name) to the right

<header id="page-header">

    <div class="content-header justify-content-between">
    
        <!-- Sidebar toggle button -->
        <button class="btn btn-alt-light btn-aspect d-lg-none" onclick="toggleSidebar('sidebar')"><i class="fas fa-bars"></i></button>
        
        <!-- Search field -->
        <div class="input-group d-none d-lg-flex" style="width: 200px;">
            <input type="text" class="form-control rounded-start-pill border border-end-0" placeholder="Search...">
            <button class="btn text-beets border border-start-0 rounded-end-pill" id="button-addon2"><i class="fas fa-search"></i></button>
        </div>
        
        <!-- Logotype -->
        <div class="d-flex d-lg-none align-items-center">
            <img src="img/beets_col_100x313.png" style="height: 40px;">
        </div>
        
        <!-- User account dropdown -->
        <div class="d-flex align-items-center">
            <div class="dropdown d-flex align-items-center">
                <span class="d-none d-lg-inline-block me-2 mt-1">Dwight Schrute</span>
                <button class="btn btn-alt-light btn-aspect rounded-circle dropdown-no-caret dropdown-toggle" data-bs-toggle="dropdown">
                    DS
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a class="dropdown-item" href="#">Account</a></li>
                    <li><a class="dropdown-item" href="#">Settings</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item" href="#">Log out</a></li>
                </ul>
            </div>
        </div>
    
    </div>

</header>

Themes

There are two color themes for the page header. The default is white but if you add .page-header-dark to #page-container you will activate the dark theme. Shadows and borders will be altered to fit the theme.

The best looking variant is to match a dark page header with a dark sidebar. While it is possible t use a dark page header with a default sidebar, it doesn't make much sense. You can however manually style the .content-header in #sidebar with background color and border styles so that it looks like you want it.

<div id="page-container" class="page-header-dark">

    <header id="page-header">
        ...
    </header>

</div>

Fixed header

You can have the page header be either fixed (always visible) to the top of the page when you scroll, or you can have it static so that it follows the page content on scroll. Default is static but you can easily set it to fixed by adding .page-header-fixed to #page-container.

The fixed page header will render a small shadow under it.

<div id="page-container" class="page-header-fixed">

    <header id="page-header">
        ...
    </header>

</div>