Perfect way to make a header
up vote
-1
down vote
favorite
I am creating a web application in Laravel and I have a template for the header element. What I want to do is make the header fixed on the top. I have the following code to do it:
.header{
background-color: #ffffff;
width: 100%;
height: 10%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
}
But, the header appears some way down from the page and my margin-top to other elements aren't working as well. So, how do I make the header fixed at the top and still have all other styling working? Thanks
html css css-position fixed
asked Nov 12 at 3:34
PHPCoder
265
add a comment |
up vote
-1
down vote
favorite
I am creating a web application in Laravel and I have a template for the header element. What I want to do is make the header fixed on the top. I have the following code to do it:
.header{
background-color: #ffffff;
width: 100%;
height: 10%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
}
But, the header appears some way down from the page and my margin-top to other elements aren't working as well. So, how do I make the header fixed at the top and still have all other styling working? Thanks
html css css-position fixed
asked Nov 12 at 3:34
PHPCoder
265
have you triedtop: 0; left: 0;
– Ali
Nov 12 at 3:40
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
add apadding-topto yourbodywith the size of your header height
– Ali
Nov 12 at 3:43
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mentionpadding-topin the body.
– PHPCoder
Nov 12 at 3:46
1
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such aspxso you have consistent behaviour across all screens.
– jla
Nov 12 at 3:55
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I am creating a web application in Laravel and I have a template for the header element. What I want to do is make the header fixed on the top. I have the following code to do it:
.header{
background-color: #ffffff;
width: 100%;
height: 10%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
}
But, the header appears some way down from the page and my margin-top to other elements aren't working as well. So, how do I make the header fixed at the top and still have all other styling working? Thanks
html css css-position fixed
asked Nov 12 at 3:34
PHPCoder
265
I am creating a web application in Laravel and I have a template for the header element. What I want to do is make the header fixed on the top. I have the following code to do it:
.header{
background-color: #ffffff;
width: 100%;
height: 10%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
}
But, the header appears some way down from the page and my margin-top to other elements aren't working as well. So, how do I make the header fixed at the top and still have all other styling working? Thanks
html css css-position fixed
html css css-position fixed
asked Nov 12 at 3:34
PHPCoder
265
asked Nov 12 at 3:34
PHPCoder
265
asked Nov 12 at 3:34
PHPCoder
265
asked Nov 12 at 3:34
PHPCoder
265
asked Nov 12 at 3:34
PHPCoder
265
265
have you triedtop: 0; left: 0;
– Ali
Nov 12 at 3:40
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
add apadding-topto yourbodywith the size of your header height
– Ali
Nov 12 at 3:43
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mentionpadding-topin the body.
– PHPCoder
Nov 12 at 3:46
1
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such aspxso you have consistent behaviour across all screens.
– jla
Nov 12 at 3:55
add a comment |
have you triedtop: 0; left: 0;
– Ali
Nov 12 at 3:40
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
add apadding-topto yourbodywith the size of your header height
– Ali
Nov 12 at 3:43
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mentionpadding-topin the body.
– PHPCoder
Nov 12 at 3:46
1
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such aspxso you have consistent behaviour across all screens.
– jla
Nov 12 at 3:55
have you tried
top: 0; left: 0;– Ali
Nov 12 at 3:40
have you tried
top: 0; left: 0;– Ali
Nov 12 at 3:40
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
add a
padding-top to your body with the size of your header height– Ali
Nov 12 at 3:43
add a
padding-top to your body with the size of your header height– Ali
Nov 12 at 3:43
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mention
padding-top in the body.– PHPCoder
Nov 12 at 3:46
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mention
padding-top in the body.– PHPCoder
Nov 12 at 3:46
1
1
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such as
px so you have consistent behaviour across all screens.– jla
Nov 12 at 3:55
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such as
px so you have consistent behaviour across all screens.– jla
Nov 12 at 3:55
add a comment |
2 Answers
2
active
oldest
votes
up vote
3
down vote
accepted
When you give the height for a fixed element, overlapping issues might be arise, for such cases repel the rest of the content from the header.
i.e., here the height of the header is 50px so repel it from the content by giving margin-top:50px; to the content.
When you use position:absolute; or position:fixed; use top, left, right, bottom to mention its position where you want it to be
Try this
.header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div>answered Nov 12 at 4:50
Viira
1,898422
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
|
show 2 more comments
up vote
0
down vote
body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>answered Nov 12 at 4:28
manoz kirati
16
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
3
down vote
accepted
When you give the height for a fixed element, overlapping issues might be arise, for such cases repel the rest of the content from the header.
i.e., here the height of the header is 50px so repel it from the content by giving margin-top:50px; to the content.
When you use position:absolute; or position:fixed; use top, left, right, bottom to mention its position where you want it to be
Try this
.header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div>answered Nov 12 at 4:50
Viira
1,898422
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
|
show 2 more comments
up vote
3
down vote
accepted
When you give the height for a fixed element, overlapping issues might be arise, for such cases repel the rest of the content from the header.
i.e., here the height of the header is 50px so repel it from the content by giving margin-top:50px; to the content.
When you use position:absolute; or position:fixed; use top, left, right, bottom to mention its position where you want it to be
Try this
.header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div>answered Nov 12 at 4:50
Viira
1,898422
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
|
show 2 more comments
up vote
3
down vote
accepted
up vote
3
down vote
accepted
When you give the height for a fixed element, overlapping issues might be arise, for such cases repel the rest of the content from the header.
i.e., here the height of the header is 50px so repel it from the content by giving margin-top:50px; to the content.
When you use position:absolute; or position:fixed; use top, left, right, bottom to mention its position where you want it to be
Try this
.header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div>answered Nov 12 at 4:50
Viira
1,898422
When you give the height for a fixed element, overlapping issues might be arise, for such cases repel the rest of the content from the header.
i.e., here the height of the header is 50px so repel it from the content by giving margin-top:50px; to the content.
When you use position:absolute; or position:fixed; use top, left, right, bottom to mention its position where you want it to be
Try this
.header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div> .header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div> .header{
background-color: #ffffff;
width: 100%;
min-height: 50px;
display: flex;
/*padding: 0.2em 0.2em 0.2em 0.2em;*/
font-family: "Viga";
border: none;
position: fixed;
top:0;
left:0;
}
body{background:red; height:7000px;}
.content{color:#fff; margin-top:50px;} <header class="header">
<p>Header lays here!</p>
</header>
<div class="content">
<h1>Content heading</h1>
<p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
</div>answered Nov 12 at 4:50
Viira
1,898422
edited Nov 12 at 5:23
answered Nov 12 at 4:50
Viira
1,898422
answered Nov 12 at 4:50
Viira
1,898422
answered Nov 12 at 4:50
Viira
1,898422
1,898422
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
|
show 2 more comments
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
Everything worked fine but the header is overlapping some of my other contents, how do I deal with that?
– PHPCoder
Nov 12 at 5:12
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
can u add a screenshot of the problem
– Viira
Nov 12 at 5:14
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
ok I get it wait I'll update the code
– Viira
Nov 12 at 5:16
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
Thanks! And I didn't find a way to insert pictures!
– PHPCoder
Nov 12 at 5:19
I've updated the code
– Viira
Nov 12 at 5:23
I've updated the code
– Viira
Nov 12 at 5:23
|
show 2 more comments
up vote
0
down vote
body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>answered Nov 12 at 4:28
manoz kirati
16
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
add a comment |
up vote
0
down vote
body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>answered Nov 12 at 4:28
manoz kirati
16
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
add a comment |
up vote
0
down vote
up vote
0
down vote
body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>answered Nov 12 at 4:28
manoz kirati
16
body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>body{
background-color: #7e797b;
}
.header{
background-color: #ffffff;
width: 100%;
display: flex;
padding: 0.2em 0.2em 0.2em 0.2em;
font-family: "Viga";
border: none;
position: fixed;
left:0;
top:0
}<html>
<head>
<body>
<header class="header">
<h1>Header</h1>
</header>
</body>
</head>
</html>answered Nov 12 at 4:28
manoz kirati
16
answered Nov 12 at 4:28
manoz kirati
16
answered Nov 12 at 4:28
manoz kirati
16
answered Nov 12 at 4:28
manoz kirati
16
16
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
add a comment |
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
Just add left:0 and top:0. No need to give the height of the header, as the height will change according to the screen height.
– manoz kirati
Nov 12 at 4:29
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53255630%2fperfect-way-to-make-a-header%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
have you tried
top: 0; left: 0;– Ali
Nov 12 at 3:40
@Ali That does hide that annoying gap but margins are not working and everything is glued to the header. How do I avoid that?
– PHPCoder
Nov 12 at 3:42
add a
padding-topto yourbodywith the size of your header height– Ali
Nov 12 at 3:43
@Ali That just messed everything. How do I avoid scrolls in my whole page. I am getting scrolls when I mention
padding-topin the body.– PHPCoder
Nov 12 at 3:46
1
@PHPCoder it may not be a good idea to have a percentage based height for your header. The height will change depending on screen size rather than content, which can give an unintended result on some screens. Leave the height blank (or set to auto) to fit to its content, or set it with fixed units such as
pxso you have consistent behaviour across all screens.– jla
Nov 12 at 3:55