Why header scroll with body in css?
I created a simple css layout for my website where is header,left sidebar and footer in right side white space is body. My issue is that "when I scroll body text then header too scroll. But when I fixed the header then sidebar height increased and the issue continually depends each other. I try to do position : absolute/fixed/relative but I didn't get solution.
This is my website please check it and school the page there you will get what I want to ask , if you not understand me.
What is my question?
How I make , if the scroll the page then only text body scroll not whole page included header/sidebar/footer
Why I not posted code here?
I believe this is a simple problem where it can we solve by developer console and if I post the code then this post question will so so large to css.
html css layout header footer
edited Dec 1 at 11:49
halfer
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
add a comment |
I created a simple css layout for my website where is header,left sidebar and footer in right side white space is body. My issue is that "when I scroll body text then header too scroll. But when I fixed the header then sidebar height increased and the issue continually depends each other. I try to do position : absolute/fixed/relative but I didn't get solution.
This is my website please check it and school the page there you will get what I want to ask , if you not understand me.
What is my question?
How I make , if the scroll the page then only text body scroll not whole page included header/sidebar/footer
Why I not posted code here?
I believe this is a simple problem where it can we solve by developer console and if I post the code then this post question will so so large to css.
html css layout header footer
edited Dec 1 at 11:49
halfer
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50
add a comment |
I created a simple css layout for my website where is header,left sidebar and footer in right side white space is body. My issue is that "when I scroll body text then header too scroll. But when I fixed the header then sidebar height increased and the issue continually depends each other. I try to do position : absolute/fixed/relative but I didn't get solution.
This is my website please check it and school the page there you will get what I want to ask , if you not understand me.
What is my question?
How I make , if the scroll the page then only text body scroll not whole page included header/sidebar/footer
Why I not posted code here?
I believe this is a simple problem where it can we solve by developer console and if I post the code then this post question will so so large to css.
html css layout header footer
edited Dec 1 at 11:49
halfer
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
I created a simple css layout for my website where is header,left sidebar and footer in right side white space is body. My issue is that "when I scroll body text then header too scroll. But when I fixed the header then sidebar height increased and the issue continually depends each other. I try to do position : absolute/fixed/relative but I didn't get solution.
This is my website please check it and school the page there you will get what I want to ask , if you not understand me.
What is my question?
How I make , if the scroll the page then only text body scroll not whole page included header/sidebar/footer
Why I not posted code here?
I believe this is a simple problem where it can we solve by developer console and if I post the code then this post question will so so large to css.
html css layout header footer
html css layout header footer
edited Dec 1 at 11:49
halfer
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
edited Dec 1 at 11:49
halfer
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
edited Dec 1 at 11:49
halfer
14.3k758109
edited Dec 1 at 11:49
halfer
14.3k758109
edited Dec 1 at 11:49
halfer
14.3k758109
14.3k758109
asked Nov 11 at 14:19
Sidharth pathak
108
asked Nov 11 at 14:19
Sidharth pathak
108
asked Nov 11 at 14:19
Sidharth pathak
108
108
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50
add a comment |
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50
add a comment |
3 Answers
3
active
oldest
votes
First of all, I want to say your html structure is very old (no offence). That's why I have created a new html markup that will work as per your requirement:
Here is the HTML:
<body>
<div class="wrapper">
<header>This is Header</header>
<div class="content">
<aside>This is sidebar</aside>
<main>This is main content area</main>
</div>
<footer>This is Footer</footer>
</div>
</body>
Here is the CSS:
body
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
overflow: hidden;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
header
min-height: 50px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
footer
min-height: 50px;
background: #f7f7f7;
border-top: 1px solid #e0e0e0;
.content
flex: auto;
display: flex;
align-items: stretch;
overflow: hidden;
aside
width: 100%;
max-width: 300px;
border-right: 1px solid #e4e4e4;
main
flex: auto;
overflow: auto;
If you put your content in the main element, the only thing will scroll in the page is that main element content. Header, Footer and Sidebar is sticky.
answered Nov 11 at 15:29
Shuvo
487
add a comment |
Ok, I think I got it, first you need to add a position fixed to .header-top
.header_top
background: #a7aaaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAAGXRFW…dj+P+AieE/E8M/GInMQGNjcilHf0mXwqOFPITHjyhhAgB0x2Tmn7bVcAAAAABJRU5ErkJggg==) repeat-x 0 0;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #eee;
width: 100%;
height: 55px;
position: fixed;/*Added*/
top: 0;/*Added*/
left: 0;/*Added*/
Then, instead of position: absolute for .zeft ul set a position fixed and a top.
.zalft ul
position: fixed; /*Changed*/
left: 0;
box-shadow: rgba(0,0,0,.1) 0 -1px 10px;
width: 225px;
height: 100%;
background-color: #f9f9f9;
padding: 18px 0 0;
margin: 0;
top: 56px; /*Added*/
And for the last change the margin top for
.zamainDiv
margin: 80px 0 15px; /*Changed*/
padding: 0 30px 60px;
Let me know if that helps!
answered Nov 11 at 15:30
MartinBA
7161213
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
add a comment |
To achieve this:
- Add fixed positioning to header, set top:0, left:0, to stick it to top
- Add fixed positioning to sidebar (ul inside the td, if you give to td it will break), set left:0, and then top needs value from header height to prevent overlapping. In your case you have fixed height of 55px, so that is the value to set.
Add necessary top value to content table cell, because it will overlap with header.
.header_top
position: fixed;
top: 0;
left: 0;.zalft > ul
position: fixed;
top: 56px;#setupdone_Div
margin-top: 82px;
answered Nov 11 at 15:32
Usce
1771214
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249629%2fwhy-header-scroll-with-body-in-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
First of all, I want to say your html structure is very old (no offence). That's why I have created a new html markup that will work as per your requirement:
Here is the HTML:
<body>
<div class="wrapper">
<header>This is Header</header>
<div class="content">
<aside>This is sidebar</aside>
<main>This is main content area</main>
</div>
<footer>This is Footer</footer>
</div>
</body>
Here is the CSS:
body
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
overflow: hidden;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
header
min-height: 50px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
footer
min-height: 50px;
background: #f7f7f7;
border-top: 1px solid #e0e0e0;
.content
flex: auto;
display: flex;
align-items: stretch;
overflow: hidden;
aside
width: 100%;
max-width: 300px;
border-right: 1px solid #e4e4e4;
main
flex: auto;
overflow: auto;
If you put your content in the main element, the only thing will scroll in the page is that main element content. Header, Footer and Sidebar is sticky.
answered Nov 11 at 15:29
Shuvo
487
add a comment |
First of all, I want to say your html structure is very old (no offence). That's why I have created a new html markup that will work as per your requirement:
Here is the HTML:
<body>
<div class="wrapper">
<header>This is Header</header>
<div class="content">
<aside>This is sidebar</aside>
<main>This is main content area</main>
</div>
<footer>This is Footer</footer>
</div>
</body>
Here is the CSS:
body
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
overflow: hidden;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
header
min-height: 50px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
footer
min-height: 50px;
background: #f7f7f7;
border-top: 1px solid #e0e0e0;
.content
flex: auto;
display: flex;
align-items: stretch;
overflow: hidden;
aside
width: 100%;
max-width: 300px;
border-right: 1px solid #e4e4e4;
main
flex: auto;
overflow: auto;
If you put your content in the main element, the only thing will scroll in the page is that main element content. Header, Footer and Sidebar is sticky.
answered Nov 11 at 15:29
Shuvo
487
add a comment |
First of all, I want to say your html structure is very old (no offence). That's why I have created a new html markup that will work as per your requirement:
Here is the HTML:
<body>
<div class="wrapper">
<header>This is Header</header>
<div class="content">
<aside>This is sidebar</aside>
<main>This is main content area</main>
</div>
<footer>This is Footer</footer>
</div>
</body>
Here is the CSS:
body
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
overflow: hidden;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
header
min-height: 50px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
footer
min-height: 50px;
background: #f7f7f7;
border-top: 1px solid #e0e0e0;
.content
flex: auto;
display: flex;
align-items: stretch;
overflow: hidden;
aside
width: 100%;
max-width: 300px;
border-right: 1px solid #e4e4e4;
main
flex: auto;
overflow: auto;
If you put your content in the main element, the only thing will scroll in the page is that main element content. Header, Footer and Sidebar is sticky.
answered Nov 11 at 15:29
Shuvo
487
First of all, I want to say your html structure is very old (no offence). That's why I have created a new html markup that will work as per your requirement:
Here is the HTML:
<body>
<div class="wrapper">
<header>This is Header</header>
<div class="content">
<aside>This is sidebar</aside>
<main>This is main content area</main>
</div>
<footer>This is Footer</footer>
</div>
</body>
Here is the CSS:
body
margin: 0;
padding: 0;
min-height: 100vh;
position: relative;
overflow: hidden;
.wrapper
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
header
min-height: 50px;
background: #f7f7f7;
border-bottom: 1px solid #e0e0e0;
footer
min-height: 50px;
background: #f7f7f7;
border-top: 1px solid #e0e0e0;
.content
flex: auto;
display: flex;
align-items: stretch;
overflow: hidden;
aside
width: 100%;
max-width: 300px;
border-right: 1px solid #e4e4e4;
main
flex: auto;
overflow: auto;
If you put your content in the main element, the only thing will scroll in the page is that main element content. Header, Footer and Sidebar is sticky.
answered Nov 11 at 15:29
Shuvo
487
answered Nov 11 at 15:29
Shuvo
487
answered Nov 11 at 15:29
Shuvo
487
answered Nov 11 at 15:29
Shuvo
487
487
add a comment |
add a comment |
Ok, I think I got it, first you need to add a position fixed to .header-top
.header_top
background: #a7aaaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAAGXRFW…dj+P+AieE/E8M/GInMQGNjcilHf0mXwqOFPITHjyhhAgB0x2Tmn7bVcAAAAABJRU5ErkJggg==) repeat-x 0 0;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #eee;
width: 100%;
height: 55px;
position: fixed;/*Added*/
top: 0;/*Added*/
left: 0;/*Added*/
Then, instead of position: absolute for .zeft ul set a position fixed and a top.
.zalft ul
position: fixed; /*Changed*/
left: 0;
box-shadow: rgba(0,0,0,.1) 0 -1px 10px;
width: 225px;
height: 100%;
background-color: #f9f9f9;
padding: 18px 0 0;
margin: 0;
top: 56px; /*Added*/
And for the last change the margin top for
.zamainDiv
margin: 80px 0 15px; /*Changed*/
padding: 0 30px 60px;
Let me know if that helps!
answered Nov 11 at 15:30
MartinBA
7161213
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
add a comment |
Ok, I think I got it, first you need to add a position fixed to .header-top
.header_top
background: #a7aaaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAAGXRFW…dj+P+AieE/E8M/GInMQGNjcilHf0mXwqOFPITHjyhhAgB0x2Tmn7bVcAAAAABJRU5ErkJggg==) repeat-x 0 0;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #eee;
width: 100%;
height: 55px;
position: fixed;/*Added*/
top: 0;/*Added*/
left: 0;/*Added*/
Then, instead of position: absolute for .zeft ul set a position fixed and a top.
.zalft ul
position: fixed; /*Changed*/
left: 0;
box-shadow: rgba(0,0,0,.1) 0 -1px 10px;
width: 225px;
height: 100%;
background-color: #f9f9f9;
padding: 18px 0 0;
margin: 0;
top: 56px; /*Added*/
And for the last change the margin top for
.zamainDiv
margin: 80px 0 15px; /*Changed*/
padding: 0 30px 60px;
Let me know if that helps!
answered Nov 11 at 15:30
MartinBA
7161213
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
add a comment |
Ok, I think I got it, first you need to add a position fixed to .header-top
.header_top
background: #a7aaaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAAGXRFW…dj+P+AieE/E8M/GInMQGNjcilHf0mXwqOFPITHjyhhAgB0x2Tmn7bVcAAAAABJRU5ErkJggg==) repeat-x 0 0;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #eee;
width: 100%;
height: 55px;
position: fixed;/*Added*/
top: 0;/*Added*/
left: 0;/*Added*/
Then, instead of position: absolute for .zeft ul set a position fixed and a top.
.zalft ul
position: fixed; /*Changed*/
left: 0;
box-shadow: rgba(0,0,0,.1) 0 -1px 10px;
width: 225px;
height: 100%;
background-color: #f9f9f9;
padding: 18px 0 0;
margin: 0;
top: 56px; /*Added*/
And for the last change the margin top for
.zamainDiv
margin: 80px 0 15px; /*Changed*/
padding: 0 30px 60px;
Let me know if that helps!
answered Nov 11 at 15:30
MartinBA
7161213
Ok, I think I got it, first you need to add a position fixed to .header-top
.header_top
background: #a7aaaa url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAAGXRFW…dj+P+AieE/E8M/GInMQGNjcilHf0mXwqOFPITHjyhhAgB0x2Tmn7bVcAAAAABJRU5ErkJggg==) repeat-x 0 0;
border-bottom: 1px solid #999;
text-shadow: 0 1px 0 #eee;
width: 100%;
height: 55px;
position: fixed;/*Added*/
top: 0;/*Added*/
left: 0;/*Added*/
Then, instead of position: absolute for .zeft ul set a position fixed and a top.
.zalft ul
position: fixed; /*Changed*/
left: 0;
box-shadow: rgba(0,0,0,.1) 0 -1px 10px;
width: 225px;
height: 100%;
background-color: #f9f9f9;
padding: 18px 0 0;
margin: 0;
top: 56px; /*Added*/
And for the last change the margin top for
.zamainDiv
margin: 80px 0 15px; /*Changed*/
padding: 0 30px 60px;
Let me know if that helps!
answered Nov 11 at 15:30
MartinBA
7161213
answered Nov 11 at 15:30
MartinBA
7161213
answered Nov 11 at 15:30
MartinBA
7161213
answered Nov 11 at 15:30
MartinBA
7161213
7161213
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
add a comment |
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
It's not working, you add this updates?
– MartinBA
Nov 11 at 16:20
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
The developer console say that no, you didn't
– MartinBA
Nov 11 at 16:57
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
I can see it now, .zalft ul needs a position fixed not relative, and thats it
– MartinBA
Nov 11 at 17:10
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
Update that and if you add more text to the body you will see how it works.
– MartinBA
Nov 11 at 17:12
add a comment |
To achieve this:
- Add fixed positioning to header, set top:0, left:0, to stick it to top
- Add fixed positioning to sidebar (ul inside the td, if you give to td it will break), set left:0, and then top needs value from header height to prevent overlapping. In your case you have fixed height of 55px, so that is the value to set.
Add necessary top value to content table cell, because it will overlap with header.
.header_top
position: fixed;
top: 0;
left: 0;.zalft > ul
position: fixed;
top: 56px;#setupdone_Div
margin-top: 82px;
answered Nov 11 at 15:32
Usce
1771214
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
add a comment |
To achieve this:
- Add fixed positioning to header, set top:0, left:0, to stick it to top
- Add fixed positioning to sidebar (ul inside the td, if you give to td it will break), set left:0, and then top needs value from header height to prevent overlapping. In your case you have fixed height of 55px, so that is the value to set.
Add necessary top value to content table cell, because it will overlap with header.
.header_top
position: fixed;
top: 0;
left: 0;.zalft > ul
position: fixed;
top: 56px;#setupdone_Div
margin-top: 82px;
answered Nov 11 at 15:32
Usce
1771214
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
add a comment |
To achieve this:
- Add fixed positioning to header, set top:0, left:0, to stick it to top
- Add fixed positioning to sidebar (ul inside the td, if you give to td it will break), set left:0, and then top needs value from header height to prevent overlapping. In your case you have fixed height of 55px, so that is the value to set.
Add necessary top value to content table cell, because it will overlap with header.
.header_top
position: fixed;
top: 0;
left: 0;.zalft > ul
position: fixed;
top: 56px;#setupdone_Div
margin-top: 82px;
answered Nov 11 at 15:32
Usce
1771214
To achieve this:
- Add fixed positioning to header, set top:0, left:0, to stick it to top
- Add fixed positioning to sidebar (ul inside the td, if you give to td it will break), set left:0, and then top needs value from header height to prevent overlapping. In your case you have fixed height of 55px, so that is the value to set.
Add necessary top value to content table cell, because it will overlap with header.
.header_top
position: fixed;
top: 0;
left: 0;.zalft > ul
position: fixed;
top: 56px;#setupdone_Div
margin-top: 82px;
answered Nov 11 at 15:32
Usce
1771214
edited Nov 11 at 16:51
answered Nov 11 at 15:32
Usce
1771214
answered Nov 11 at 15:32
Usce
1771214
answered Nov 11 at 15:32
Usce
1771214
1771214
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
add a comment |
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
@Sidharthpathak Refer to code above, I've edited post. It should work on your site.
– Usce
Nov 11 at 16:53
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
Have you put it in the style.css, saved, cleared cache eventually, and tried. Also try using important at the end of statements, it should work @Sidharthpathak
– Usce
Nov 11 at 17:14
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249629%2fwhy-header-scroll-with-body-in-css%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
This is off-topic, because it refers to an external site that will be repaired shortly. It is evident that you know we want questions to be self-contained here, and yet you post anyway, in violation of the guidelines. Please supply a Minimal, Complete, and Verifiable example.
– halfer
Dec 1 at 11:50