CSS Header

Last updated: 4 months ago

Category: Basic

Universal webpage header with adaptive width, capable of accommodating logos, navigation, menus, search bars, buttons, etc.

Preface

The general header uses a fixed HTML structure to meet responsive layout requirements.

Structure hierarchy: oc-header → wrap → l/c/r → container (optional) → head/body.

    
        <oc-header>
            <div class="_header-wrap">
                <div class="_header-l">
                    <!-- Left part on mobile header, usually buttons -->
                </div>
                <div class="_header-c">
                    <!-- Wrapped in an outer container, supports _container[-sm ~ -xl] (optional) -->
                    <div class="_container">
                        <div class="_header-head">
                            <!-- Header's top part, usually contains logo -->
                        </div>
                        <div class="_header-body">
                            <!-- Header's main part, usually contains nav, search, buttons, etc. -->
                        </div>
                    </div>
                </div>
                <div class="_header-r">
                    <!-- Right part on mobile header, usually buttons -->
                </div>
            </div>
        </oc-header>
    

Basic Usage

The header mainly consists of four parts: mobile left, mobile right, common head, and common body. The following is a simple demo. The header has no default height; it grows with the content in the body.

Fill Content

_header-head and _header-body make up the main area of the header. In this example, we use the logo and nav (_group-lamp) components.

Placeholder

The header uses fixed positioning by default (fixed to the top). The following sibling elements will occupy the original position of the header and may be overlapped. Use _header-holder to prevent this.

Inline Mode

If you want the header not to be fixed (i.e., part of normal flow), add the inherit attribute to the oc-header tag. In this case, _header-holder is not needed.

Using Outer Container

By default, the header spans full width. If sibling elements use _container[-*], you can also add a _container[-*] wrapper inside _header-c.

Fill Both Sides

On mobile, _header-body is hidden. Instead, _header-l and _header-r are shown. These usually contain icons or buttons.

Each side item is a square, so the content width is limited.

Align Both Sides

Mobile header is center-aligned by default: “left-center-right” layout. The number of items on each side should be equal to keep the logo centered.

If you want left-right alignment, put all icons/buttons in _header-r and add justify.

Rich Content

Textual content is mainly placed inside _header-body. Supported components include:

• rep=nav: navigation area, supports 3 styles
  • _menu: use oc-menu
  • _grade: static menu
  • _group-lamp: static tabs
• rep=icons: icon button group
• rep=link: single hyperlink
• rep=avatar: avatar component
• rep=btns: button group
• rep=dropdown: dropdown instance
• rep=search: search component

Custom Icons

This component applies special handling for the header icons on both sides in mobile view.
If you are using third-party icons, make sure the class name includes the word icon.

For example, after importing the Font Awesome icon library (https://fontawesome.com/), you can use the following approach:

• <i class="fa-solid fa-face-smile myicon"></i> — the custom myicon class is added to ensure it contains the keyword icon.