Make header non sticky or non fixed with css

I’m trying to make the header scroll with the page on desktop view . On mobile version works fine but on desktop the header remains fixed. I’ve tried to change position to relative but doesn’t work. Can someone help. The dynamic views themes on blogger are hard to customize but I am sure someone will do the trick.

Here is the code I’ve added until now on the theme:

#header .header-drawer.sticky,
#header .header-drawer {
  top: 134px;

#header .header-bar {
  height: 165px;

#header:hover .header-drawer,
body.viewitem-open #header .header-drawer {
  top: 165px;

#header-container {
  height: 205px;

.viewitem-panel .viewitem-inner {
  top: 100px;
  padding-bottom: 120px !important;
  height: auto !important;

#header-container #header.header .header-bar span.title {
  background: url( no-repeat center;
  margin-left: auto !important;
  margin-right: auto !important;
  height: 165px;

.header-bar #search {
  display: none !important;

#header.header .title a h1,
#header.header .title h3 {
  display: none;

.attribution {
  display: none !important;

#gadget-dock {
  display: none !important;

#header .header-drawer.sticky {
  margin-top: 0px !important;
  top: 165px !important;
  -moz-transition: top 0.0s linear 0.0s !important;
  -webkit-transition: top 0.0s linear 0.0s !important;
  -ms-transition: top 0.0s linear 0.0s !important;
  -o-transition: top 0.0s linear 0.0s !important;

>Solution :

Try position relative with important flag. I don’t see any other way to do it. It is already position: fixed. If you can’t amend this, try override using !important flag

#header {
    position: relative !important;

Leave a Reply