Move content under fixed nav bar with RESPONSIVE space filler
1
I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?
html css
asked Nov 20 at 13:34
Zechariah Raman
127
add a comment |
1
I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?
html css
asked Nov 20 at 13:34
Zechariah Raman
127
add a comment |
1
1
1
I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?
html css
asked Nov 20 at 13:34
Zechariah Raman
127
I'm going to base my question on the question "Moving DOM elements below a fixed navigation bar", since mine is very similar.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>That snippet is altered a bit to suit me. I deliberately put many navigation list items to make my point clearer (I hope). The accepted solution in question linked above gives a non-responsive height to the <header>,
which here is acting as the space filler (".nav-box"). So when the viewport is resized (smaller), the list items wrap but the header isn't coded to move with the change - content gets covered by the fixed <nav>.
My Question:
How in just CSS (if possible) can the <header>'s height be set to respond to the <nav>'s change in height when the list items get wrapped?
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>html css
html css
asked Nov 20 at 13:34
Zechariah Raman
127
asked Nov 20 at 13:34
Zechariah Raman
127
asked Nov 20 at 13:34
Zechariah Raman
127
asked Nov 20 at 13:34
Zechariah Raman
127
asked Nov 20 at 13:34
Zechariah Raman
127
127
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
0
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
answered Nov 20 at 13:57
elveti
7912715
I think it will still look fine on older browsers like IE. They don't understandposition:sticky;, so they will fall back toposition:static;, right?
– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
add a comment |
0
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>answered Nov 20 at 13:45
Itay Gal
7,38852559
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
});
}
});
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%2f53394196%2fmove-content-under-fixed-nav-bar-with-responsive-space-filler%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
answered Nov 20 at 13:57
elveti
7912715
I think it will still look fine on older browsers like IE. They don't understandposition:sticky;, so they will fall back toposition:static;, right?
– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
add a comment |
0
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
answered Nov 20 at 13:57
elveti
7912715
I think it will still look fine on older browsers like IE. They don't understandposition:sticky;, so they will fall back toposition:static;, right?
– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
add a comment |
0
0
0
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
answered Nov 20 at 13:57
elveti
7912715
If you want a really responsive solution, remove the position: fixed from nav and add a position: sticky and top: 0 to your header.
header {
position: sticky;
top: 0;
}
Attention this is IMHO the cleanest solution, but depending on your needs it may not suit you, since position: sticky is not supported in IE (if you care for IE)
Example: https://codepen.io/anon/pen/MzrgEr
answered Nov 20 at 13:57
elveti
7912715
answered Nov 20 at 13:57
elveti
7912715
answered Nov 20 at 13:57
elveti
7912715
answered Nov 20 at 13:57
elveti
7912715
7912715
I think it will still look fine on older browsers like IE. They don't understandposition:sticky;, so they will fall back toposition:static;, right?
– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
add a comment |
I think it will still look fine on older browsers like IE. They don't understandposition:sticky;, so they will fall back toposition:static;, right?
– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
I think it will still look fine on older browsers like IE. They don't understand
position:sticky;, so they will fall back to position:static;, right?– Zechariah Raman
Nov 20 at 14:19
I think it will still look fine on older browsers like IE. They don't understand
position:sticky;, so they will fall back to position:static;, right?– Zechariah Raman
Nov 20 at 14:19
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
@ZechariahRaman Yeah, it just won't be sticky/fixed. It'll behave like a normal div, but it won't break anything and should still look ok in IE.
– elveti
Nov 20 at 14:33
add a comment |
0
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>answered Nov 20 at 13:45
Itay Gal
7,38852559
add a comment |
0
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>answered Nov 20 at 13:45
Itay Gal
7,38852559
add a comment |
0
0
0
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>answered Nov 20 at 13:45
Itay Gal
7,38852559
You can use media queries if you know when the fixed navigation will have to take 2 lines. Yes, I know it's not a solid solution, but if your navigation size is fixed it can work.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
position: fixed;
width: 100%;
top: 0;
background-color: #faf3dd;
opacity: 0.8;
}
nav:hover {
opacity: 1;
}
nav li {
display: inline-block;
list-style-type: none;
padding: 0.7em;
font-size: 1em;
;
border-bottom: solid 1px;
}
main {
background-color: #98fb98;
min-height: 100vh;
padding: 1em;
}
/*Solution suggested in linked question...*/
header {
height: calc(2.4em + 1px);
/* Why 2.4em? 2.4em = 0.7em x 2 (padding)+ 1em (fontSize) + 1px (borderBottom)*/
}
@media (max-width: 505px) {
main {
margin-top: 3em;
}
}<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Gallery</li>
<li>Lorem</li>
<li>Ipsum</li>
<li>Contact</li>
</ul>
</nav>
</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mollis sapien nulla, ac feugiat tellus scelerisque eget. Morbi ac leo vel est interdum vulputate. Fusce malesuada, ex vitae sagittis porta, nisl elit consequat urna, a egestas tortor nunc
a libero. Maecenas dapibus faucibus dui, non consequat tellus. Phasellus venenatis dui a ultricies facilisis. Sed accumsan, lectus eu fringilla ullamcorper, sem ante suscipit purus, in rhoncus odio est et sem. Sed sit amet blandit turpis. Nunc non
justo hendrerit, malesuada quam id, aliquam risus. Praesent mattis urna mi, vitae pulvinar dui laoreet quis. Pellentesque dapibus, sem id fringilla accumsan, felis ligula blandit nibh, bibendum placerat sapien urna fermentum purus. Suspendisse in
finibus massa. Quisque erat libero, posuere sit amet efficitur rhoncus, cursus at tortor. Duis eu lacus tristique, tristique mauris sit amet, sagittis arcu. ultricies vitae. </p>
</main>answered Nov 20 at 13:45
Itay Gal
7,38852559
edited Nov 20 at 13:51
answered Nov 20 at 13:45
Itay Gal
7,38852559
answered Nov 20 at 13:45
Itay Gal
7,38852559
answered Nov 20 at 13:45
Itay Gal
7,38852559
7,38852559
add a comment |
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%2f53394196%2fmove-content-under-fixed-nav-bar-with-responsive-space-filler%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
