Way to make header span full width of page while using CSS grid?
I'm trying to make my header span the full width of the page (no gaps on top and sides), but I have my header within a CSS grid, and so I'm having trouble making that happen.
I want my header to stay at the top of the page, which is part of the reason I've kept it in the grid. When I took it out and did position fixed, since it was taken out of flow, the stuff below ended up hidden behind it. At least when I keep it in grid and use position: sticky; it doesn't mess up the flow.
Is there a way to make my header span the full width of the page without taking it out of the grid?
header{
position: sticky;
top: 0;
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr, auto;
grid-gap: 10px;
background-color: #000;
color: #fff;
padding: 20px;
}
#logo{
grid-column: 1;
grid-row: 1;
width: 30%;
}
nav{
grid-column: 2;
grid-row: 1;
align-self: end;
}
html css css-grid
asked Nov 25 '18 at 22:25
wysockcawysockca
1
add a comment |
I'm trying to make my header span the full width of the page (no gaps on top and sides), but I have my header within a CSS grid, and so I'm having trouble making that happen.
I want my header to stay at the top of the page, which is part of the reason I've kept it in the grid. When I took it out and did position fixed, since it was taken out of flow, the stuff below ended up hidden behind it. At least when I keep it in grid and use position: sticky; it doesn't mess up the flow.
Is there a way to make my header span the full width of the page without taking it out of the grid?
header{
position: sticky;
top: 0;
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr, auto;
grid-gap: 10px;
background-color: #000;
color: #fff;
padding: 20px;
}
#logo{
grid-column: 1;
grid-row: 1;
width: 30%;
}
nav{
grid-column: 2;
grid-row: 1;
align-self: end;
}
html css css-grid
asked Nov 25 '18 at 22:25
wysockcawysockca
1
position: stickydoesn't play well with grids. If the header has a fixed height you can make itposition: fixedand add a padding-top value on the body element equal to the header height so the content does not go below it.
– arieljuod
Nov 25 '18 at 23:01
2
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58
add a comment |
I'm trying to make my header span the full width of the page (no gaps on top and sides), but I have my header within a CSS grid, and so I'm having trouble making that happen.
I want my header to stay at the top of the page, which is part of the reason I've kept it in the grid. When I took it out and did position fixed, since it was taken out of flow, the stuff below ended up hidden behind it. At least when I keep it in grid and use position: sticky; it doesn't mess up the flow.
Is there a way to make my header span the full width of the page without taking it out of the grid?
header{
position: sticky;
top: 0;
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr, auto;
grid-gap: 10px;
background-color: #000;
color: #fff;
padding: 20px;
}
#logo{
grid-column: 1;
grid-row: 1;
width: 30%;
}
nav{
grid-column: 2;
grid-row: 1;
align-self: end;
}
html css css-grid
asked Nov 25 '18 at 22:25
wysockcawysockca
1
I'm trying to make my header span the full width of the page (no gaps on top and sides), but I have my header within a CSS grid, and so I'm having trouble making that happen.
I want my header to stay at the top of the page, which is part of the reason I've kept it in the grid. When I took it out and did position fixed, since it was taken out of flow, the stuff below ended up hidden behind it. At least when I keep it in grid and use position: sticky; it doesn't mess up the flow.
Is there a way to make my header span the full width of the page without taking it out of the grid?
header{
position: sticky;
top: 0;
grid-column: 1 / -1;
grid-row: 1;
display: grid;
grid-template-columns: 1fr, auto;
grid-gap: 10px;
background-color: #000;
color: #fff;
padding: 20px;
}
#logo{
grid-column: 1;
grid-row: 1;
width: 30%;
}
nav{
grid-column: 2;
grid-row: 1;
align-self: end;
}
html css css-grid
html css css-grid
asked Nov 25 '18 at 22:25
wysockcawysockca
1
asked Nov 25 '18 at 22:25
wysockcawysockca
1
asked Nov 25 '18 at 22:25
wysockcawysockca
1
asked Nov 25 '18 at 22:25
wysockcawysockca
1
asked Nov 25 '18 at 22:25
wysockcawysockca
1
1
position: stickydoesn't play well with grids. If the header has a fixed height you can make itposition: fixedand add a padding-top value on the body element equal to the header height so the content does not go below it.
– arieljuod
Nov 25 '18 at 23:01
2
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58
add a comment |
position: stickydoesn't play well with grids. If the header has a fixed height you can make itposition: fixedand add a padding-top value on the body element equal to the header height so the content does not go below it.
– arieljuod
Nov 25 '18 at 23:01
2
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58
position: sticky doesn't play well with grids. If the header has a fixed height you can make it position: fixed and add a padding-top value on the body element equal to the header height so the content does not go below it.– arieljuod
Nov 25 '18 at 23:01
position: sticky doesn't play well with grids. If the header has a fixed height you can make it position: fixed and add a padding-top value on the body element equal to the header height so the content does not go below it.– arieljuod
Nov 25 '18 at 23:01
2
2
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58
add a comment |
0
active
oldest
votes
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%2f53472636%2fway-to-make-header-span-full-width-of-page-while-using-css-grid%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53472636%2fway-to-make-header-span-full-width-of-page-while-using-css-grid%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
position: stickydoesn't play well with grids. If the header has a fixed height you can make itposition: fixedand add a padding-top value on the body element equal to the header height so the content does not go below it.– arieljuod
Nov 25 '18 at 23:01
2
Please post enough code to reproduce the problem you're having.
– Michael_B
Nov 25 '18 at 23:31
Use a 4 column grid?
– Paulie_D
Nov 26 '18 at 13:58