Make header non sticky or non fixed with css-CodePudding

I'm trying to make the header scroll with the page on desktop view https://www.joculdualitatii.ro/?view=classic . 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,
#header .header-drawer.open,
.header-ssyby,
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(http://2.bp.blogspot.com/-oOCWrvF6YMI/TpswCGyxlGI/AAAAAAAAD2A/yFmym6cDyS0/s380/mastercopy.png) 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;
}

CodePudding user response：

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;
}

CodePudding user response：

If it is the link you added to your question, please use your browser to inspect your elements You will find out that the #header is still position:fixed; Simply remove it or change it to position:relative;. Make sure you clear your browser cache while testing.

Also, check your referencing/targeting, judging from the link you posted, the fixed position is on the #header and not on the inner elements. Therefore, make sure you are doing this;

#header{
   position:relative;
}

You can still place important on it if you wish;

#header{
   position:relative !important;
}

CodePudding user response：

To do this, set the position: relative value in #header;