Issue
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2NipXhlY9liQXNbJivRt0r_qxomGDnkybvw8ao5fpMKRN3i8fqapEcKdlh5GN95fKWGE64b1Wtsmz5s5miMVrsymIQC8lQttvWXGv-HbLDlq-UsqD4BMj_FpelS-GygnundrLw2YcQY0D/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;
}
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;
}
Answered By - Piotr MigdaĆ
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.