Adminlte fixed layout without fixed header

0
votes

So im using Adminlte with a fixed layout. The thing is I only wanted the sidebar fixed and not the header. So I removed the position: fixed from the main header.

The problem - when scrolling down there is a gap (the size of header) at the top of the sidebar.

enter image description here

I tried this at first : 

.fixed .main-sidebar{
   padding-top:0;
}

But the problem is if you don't scroll past the heading completely the sidebar jumps under it.

enter image description here

So now I added a function in js to calculate the position and add padding accordingly. Its kinda working but its laggy and probably a bad solution. 

$(window).scroll(function () {

     var positionNow = $(window).scrollTop();

     if (positionNow < 50){
         $('.fixed .main-sidebar').css({"padding-top" : 50 - positionNow});
     } else {
         $('.fixed .main-sidebar').css({"padding-top" : "0"});
         $('.main-sidebar').css({"padding-top" : "0"});
     }

  });

Is there a better way to make the sidebar jump to top?

I realized that the gap is showing because the class main-sidebar includes the logo at top. But making the class .sidebar fixed weirdly doesn't affect sidebar-collapse.

2
javascripthtmlcssadminlte
is it necessary to have your heading ontop of your sidenav, if not you can try giving your sidenav a higher z-index - Ramon de Vries
Um no.. I want it to have padding : 0 relative to the heading if the heading is visible and if not then at the top of the page. - alienwife
can u provide code of the header and sidenav, how does the header get visible and hidden, how does the sidenav behave - Ramon de Vries
you can build a function if your header is :hidden $('.fixed .main-sidebar') gets padding-top 0 - Ramon de Vries
Oh that fixed functionality is built in Adminlte. i just had to add class fixed to body.. - alienwife

2 Answers

2
votes

There are two very simple way to achieve this

  1. Remove fixed class from body(Note: It will make sidebar scrollable) or

  2. Add css property position: absolute in main-header class

    .main-header { position: absolute !important; }

0
votes

or you can simply add "fixed" to your body on main.php

<body class="hold-transition skin-blue sidebar-mini fixed">