Search code examples
htmlcsstwitter-bootstrap-3adminlte

Fixed content-header in AdminLTE

I'm using AdminLTE with sidebar-collapse fixed in <body> and trying to make content-header fixed. So it will be floating like header. Here the HTML code : 

<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header row">
        <h1 class="col-md-6">
            Master Satuan
        </h1>
        <div class="col-md-6 text-right">
            <button id="batchDelete" class="btn btn-danger mx-1">
                <i class="fa fa-trash"></i> Delete
            </button>&nbsp;
            <button id="btnAdd" class="btn btn-success mx-1" href="#">
                <i class="fa fa-plus"></i> Add
            </button>
        </div>
    </section>

    <!-- Main content -->
    <section class="content">
    <!-- Content here ->
    </section>
 </div>

I have tried modify the css content-header with position: fixed but the header hidden in back of Main Content. And have tried the fixed header scrolling by w3c with no luck because the header still hidden in the back of Main Content. Actually I just want a fixed position after Main Header. How I can achieve this?

enter image description here

Solution

  • Set posistion:fixed; and z-indexfor your header.

    And, Set position:absolute; for main contents. Set top: some pixel values