Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Make header non sticky or non fixed with css

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>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;
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading