Rare
  • Introduction
  • HTML
    • Introduction
    • Html Structure
      • Header
      • Left Side Menu
      • Main Content
    • Main Content
      • Buttons
      • Fonts
      • Lock Screens
      • Maps
      • Modals
      • Plugins Used
      • Progress Bars
    • Css Files
    • Java Script Used
    • Scss
    • Fonts Used
    • Images used
    • Starts New page
      • Centered Logo
      • Compact Menu
      • Default
      • Horizontal
      • Light Side Bar
      • Mmenu
  • Rare Builder
    • Layouts
      • Default
      • Centered Logo
      • Compact Menu
      • Fixed Menu
      • Fixed Header
      • Horizontal
      • Icon Horizontal
      • Dark
      • Full Width
      • Header Style
      • Fixed Footer
      • Mmenu
      • Light Sidebar
    • Macros
      • Layouts
      • Breadcrumb
    • Partials
      • Headers
        • Header
        • Centered Logo Header
      • Heads
        • Head
      • Breadcrumbs
        • Breadcrumb 1
        • Breadcrumb 2
        • Breadcrumb 3
        • Breadcrumb 4
        • Breadcrumb 5
        • Breadcrumb Default
      • Ends
        • End
      • Menus
        • Default
        • Horizontal
        • Icon Horizontal
        • Compact
        • Mmenu
      • Footer
        • Footer
        • Fixed Footer
      • Messages
      • Notifications
      • User Profile
    • Add Builder
    • Commands
    • New Page
  • FAQ
    • Change Left Menu Content
    • Setting Layout As Default
    • Change Breadcrumb
    • Change Colors In scss
Powered by GitBook
On this page

Was this helpful?

  1. Rare Builder
  2. Partials
  3. Headers

Header

It contains default header style part which we can include in any required layouts.

<div class="preloader">
    <div class="preloader_img">
        <img src="img/loader.gif" class="pre_img" alt="loading...">
    </div>
</div>
<header class="header">
    <nav class="navbar navbar-static-top">
        <div>
            <a href="index2.html" class="logo navbar-brand float-left text-white text-center">
                <img src="img/logo.png" alt="logo" class="img-fluid navbar_brand_img"/>
            </a>
            <div class="navbar-btn float-left sidebar-toggle">
                <div>
                    <div class="bar1 first"></div>
                    <div class="bar2 second"></div>
                    <div class="bar3 third"></div>
                </div>
            </div>
            <div class="top_right_nav">
                <div class="float-left">
                    <div class="menu_search hidden-md-down mt-1">
                        <div class="input_icon">
                            <i class="icon_in_input input_icon_left ti-search text-primary"></i>
                            <input type="text" id="menu_filter" autocomplete="off" class="form-control pl-5 br_25" name="search" placeholder="Search...">
                        </div>
                        <!--<input type="search" name="search" class="form-control" >-->
                    </div>
                </div>
                <div class="float-right">
                    <!--start admin setting section-->
                    <div class="dropdown">
                        <a id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <img src="img/admin.jpg" class="admin_img2 img-fluid rounded-circle avatar-img" alt="avatar">

                        </a>
                        {% include "./user_details.html" %}
                    </div>
                    <!--end admin setting section-->
                </div>
                <div class="messages float-right">
                    <!--start admin setting section-->
                    <div class="dropdown">
                        <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="ti-email text-white"></i>
                            <div class="messages_badge_top">
                                <span class="badge badge-warning">3</span>
                            </div>
                        </a>
                        {% include "./messages.html" %}
                    </div>
                    <!--end admin setting section-->
                </div>
                <div class="notifications float-right">
                    <!--start admin setting section-->
                    <div class="dropdown">
                        <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="ti-bell text-white"></i>
                            <div class="notifications_badge_top">
                                <span class="badge badge-danger">4</span>
                            </div>
                        </a>
                        {% include "./notifications.html" %}
                    </div>
                    <!--end admin setting section-->
                </div>
                <div class="fullscreen float-right hidden-xs-down">
                    <i class="ti-fullscreen text-white full_screen"></i>
                </div>
            </div>
        </div>
    </nav>
</header>
PreviousHeadersNextCentered Logo Header

Last updated 5 years ago

Was this helpful?