I have a header in the beginning of my webpage with a background image covering 100% of the width and 100vh. I want to add a different section in my page for the story section which is one of my nav
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body {
font-family: 'Lato','sans-serif','arial';
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
.wrapper {
width: 100%;
height: 100vh;
padding: 0;
}
.flex {
display: flex;
justify-content: space-between;
background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)),url("img/truck.jpg");
background-size: cover;
background-position: center;
height: 100vh;
}
.flex-item {
padding-top: 15px;
}
.item1 {
padding-top: 0;
padding-left: 30px;
}
.logo {
height: 90px;
}
.main-nav ul {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}
.main-nav a {
color: white;
padding: 1rem;
text-decoration: none;
}
.main-nav a:hover {
color:orange;
}
.hero {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.hero a {
text-decoration: none;
color: white;
display: block;
margin: 10px;
}
.btn {
background-color: orange;
border-radius: 50px;
}
/*---------------------------------*/
/*Story Section*/
/*---------------------------------*/
section .flex2 {
display: flex;
flex-direction: column;
color: black;
height: 100vh;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Resources/css/styles.css">
</head>
<body class="wrapper">
<header class="flex">
<div class="flex-item item1">
<img src="Resources/img/moBurgerzLogo.png" class="logo">
</div>
<nav class="flex-item main-nav">
<ul>
<li>Our Story</li>
<li>Locations</li>
<li>Menu</li>
<li>Order now</li>
</ul>
</nav>
<div class="hero">
<h2>Best Burgers <br> In DA City(D.C)</h2>
<a href="#" class="btn" btn-full>Order now!</a>
<a href="#" class="btn" btn-ghost>View Menu!</a>
</div>
</header>
<section class="flex-2">
<div class="flex-item-2">
<h2>Established in 2017 in D.M.V</h2>
<p class="story"> founded in 2017 by owner Med.<br> Since then we have been serving the best hand crafted burgers in the D.M.V.<br>All our meat is halal and all of our ingridients are organic.</p>
</div>
</section>
</body>
</html>
elements. However I can not scroll to view the content in the story section consisting of an h2 element and paragraph tag inside a flex container.
html,
body {
font-family: "Lato", "sans-serif", "arial";
color: #fff;
font-size: 15px;
font-weight: 300;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
I think because your font color is white
Related
I am trying to make it so that on the homepage of my site, when I load into the site, you can only see the nav, title, image and some text underneath, the red div elements should not be shown, and you would have to scroll down to see it. How do I do this while still making the page responsive?
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
/*text that needs to stay on home page under image*/
.text {
text-align: center;
}
/*what needs to be hidden*/
.container1 {
padding: 40px;
background-color: red;
text-align: center;
}
/*Area with title and image*/
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<link href="https://fonts.googleapis.com/css?family=Raleway:200,400" rel="stylesheet">
<div class="nav">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
You're looking for height: 100vh (the viewport unit).
You'll also need to wrap your .header and .text placeholder into a parent element so you can control the height. I've wrapped it into the <main class="full-height" element and styled the class .full-height { height: 100vh; }
Now the user is forced to scroll to the red no matter how big/small there device is.
h2 {
font-family: 'Raleway', sans-serif;
font-weight: 400;
}
h3 {
font-family: 'Raleway', sans-serif;
font-weight: 300;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 200;
}
body {}
img {
height: 10%;
width: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
ul {
list-style-type: none;
margin: 10px;
padding: 0px;
overflow: hidden;
}
li {
float: left;
padding: 1%;
font-family: 'Raleway', sans-serif;
}
li a {
text-decoration: none;
color: black;
}
li a.active {
text-decoration: underline;
}
.nav {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: white;
}
.text {
text-align: center;
}
.container1 {
padding: 40px;
background-color: brown;
text-align: center;
}
.header {
padding: 30px;
font-size: 40px;
text-align: center;
grid-area: banner;
width: 100%;
color: black;
}
.full-height { height: 100vh; }
#media screen and (max-width: 800px) {
.leftcolumn,
.rightcolumn {
width: 100%;
padding: 0;
}
}
<div class="nav">
<ul>
<li>Learning Journal</li>
<li>Tutorial</li>
<li>Contact Me</li>
</ul>
</div>
<main class="full-height">
<div class="header">
<h2> CI435 - INTRODUCTION TO WEB DEVELEPMONT</h2>
<img src="images/htmlcode.jpg" alt="">
</div>
<div class="text">
<h2>PLACEHOLDER</h2>
</div>
</main>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
<div class="container1">
<h3>Weeek x</h3>
<p> PLACEHOLDER</p>
</div>
I'm having some trouble making a nav menu and its sub menu to display via the pseudo checkbox toggle. I looked at some guides and tried some, but I'm not getting the result I wanted -- the menus does not appear when toggle the checkbox on.
https://codepen.io/UnorthodoxThing/pen/paMBQB
HTML
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Natural Pasta</title>
<link rel="stylesheet" type="text/css" href="style-index.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Gloria+Hallelujah|Gorditas|Lobster|Nunito|Shadows+Into+Light|Varela+Round" rel="stylesheet">
<body>
<div class="wrapper">
<!-- Top Menu-->
<img class="top-logo" src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="220px" height="220px">
<div class="nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li>
<div class="dropdown-menu">
<input type="checkbox" id="A">
<label for="A">Menu</label>
<ul>
<li>Pastas To Go</li>
<li>Sauces To Go</li>
<li>
<div class="dropdown-readymeals">
<input type="checkbox" id="A-C">
<label for="A-C" style="font-size:10pt;">Ready Meals...</label>
<ul>
<li>Arancinis</li>
<li style="font-size:10pt;">Garlic Bread</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li>Find Us</li>
</ul>
</div>
</div>
<div class="banner">
<!--
<img src="img/NPDesign_full-transparent-bg-1.png" alt="NP full logo" width="300px" height="300px">
-->
</div>
<div class="body-content">
<div class="specials-title"><h3>- SPECIALISING IN -</h3></div>
<div class="specials-content">
<div class="specials-boxes"><div class="specials-text"><h3>Freshly Hand Made Pastas</h3></div><div class="specials-img"><img src="freshlyhandmadepastas-1.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Pasta Meals</h3></div><div class="specials-img"><img src="gourmetpastameals-3.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Traditional Home Made Sauces</h3></div><div class="specials-img"><img src="traditionalhomemadesauces.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Variety of Filled Pastas</h3></div><div class="specials-img"><img src="varietyoffilledpastas-1.jpeg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Home Made Soups</h3></div><div class="specials-img"><img src="homemadesoups-2.jpg"></div></div>
<div class="specials-boxes"><div class="specials-text"><h3>Gourmet Rolls</h3></div><div class="specials-img"><img src="gourmetroles-1.jpg"></div></div>
</div>
</div>
<div class="footer">
<!--<div class="grid">-->
<div class="upper-footer-container">
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Follow Us</h4>
<ul class="social-networks">
<li class="flex-items"><img src="fb-icon.png"></img></li>
<li class="flex-items"><img src="instagram-icon.png"></img></div></li>
</ul>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Opening Hours</h4> <br>
<ul class="contact-details">
<li>Monday: 9am-5:30pm</li>
<li>Tuesday: 9am-5:30pm</li>
<li>Wednesday: 9am-5:30pm</li>
<li>Thursday: 9am-9pm</li>
<li>Friday: 9am-5:30pm</li>
<li>Saturday: 9am-5pm</li>
<li>Sunday: 10am-5pm</li>
</ul>
</div>
<div class="footer-container-1">
<h4 style="font-family: 'Gloria Hallelujah', 'cursive';">Contact Us</h4> <br>
<ul class="contact-details">
<li>Add.: 152 Bunnerong Rd, Eastgardens NSW 2036</li>
<li>No.: (02) 8347 1988</li>
<li>Email</li>
<br>
<li>Catering Available</li>
</ul>
</div>
</div>
<div class="lower-footer-container">NaturalPasta © 2018</div>
<!--/div>-->
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
border: 1px solid red;
}
html {
height: 100%;
}
body {
min-height: 100%;
min-width: 100%;
}
.wrapper {
min-height: 100%;
width: 100%;
position: relative;
background: url("img/pasta-food-wallpaper-4.jpg") no-repeat;
background-size: 1350px 670px;
background-position: center;
background-attachment: fixed;
}
body {
height: 100%;
background: #ddd;
}
.nav {
height: 204px;
width: 100%;
margin: 0 auto; /* Centers navigation */
text-align: center;
text-transform: uppercase;
background: black;
display: flex;
justify-content: flex-end;
align-items: flex-end;
font-family: 'Gloria Hallelujah', cursive;
color: #ee6f20;
font-weight: bold;
font-size: 13pt;
}
.nav ul li {
height: 41px;
width: 125px;
background: #000;
}
.nav .dropdown-menu ul, .dropdown-menu .readymeals ul {
background: #000;
}
.nav a {
text-decoration: none;
color: #ee6f20;
}
.dropdown-menu ul li, .dropdown-readymeals ul li {
display: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.dropdown-menu ul {
position: absolute;
display: none;
}
input[type=checkbox] {
display: none;
}
input#A:checked ~ .dropdown-menu ul li {
display: block;
max-height: 100%;
}
input#A-C[type=checkbox]:checked ~ .dropdown-readymeals ul li {
display: block;
}
/*tbc */
.dropdown-menu ul li {
font-size: 11pt;
background: #000;
}
.nav ul {
list-style: none;
display: inherit;
}
.nav ul li, .nav ul ul, .nav ul ul li, .nav label {
cursor: pointer;
}
.top-logo {
margin: auto 0;
position: absolute;
left: 42%;
margin-top: -15px;
}
.body-content {
background-color: #000;
}
.specials-content {
position: relative;
display: flex;
flex-wrap: wrap;
color: orange;
justify-content: center;
}
.specials-title h3 {
width: 100%;
display: block;
margin-top: 0px;
padding-top: 75px;
color: #ee6f20;
}
.specials-boxes {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 35px 75px;
padding: 50px 100px;
/*adjust margin height-width*/
}
.specials-text, .specials-img {
padding: 35px;
display: flex;
align-items: center;
}
.specials-text h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #ee6f20;
}
.specials-img img {
width: 300px;
height: 300px;
border-radius: 25px 5px 25px 5px;
}
h3 {
text-align: center;
font-family: 'Gloria Hallelujah', 'cursive';
color: #eee;
}
.footer {
bottom: 280px;
padding: 150px;
width: 100%;
text-align: center;
background: rgb(0,0,0);
color: white;
font-family: sans-serif;
display: flex;
flex-flow: wrap;
}
.upper-footer-container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
}
.footer-container-1 {
width: 250px;
display: block;
margin: 25px;
}
.social-networks {
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
.flex-items a img {
width: 50px;
height: 50px;
border-radius: 25px;
margin: 25px;
}
.contact-details {
list-style: none;
font-family: 'ubuntu', sans-serif;
}
.lower-footer-container {
width: 100%;
justify-content: center;
display: flex;
flex-wrap: wrap;
margin-top: 45px;
}
Is it to do with the html? The CSS? What could be interfering from displaying the menu and its submenu? :/
Much appreciated for the long run.
(P.S. I have other source image used in here, though that should not conflict with what I'm trying to resolve.)
In your code the <ul> tag is the sibling of selector input#A
But you have written css code as if .dropdown-menu is the sibling of selector input#A. This is why your code at this particular point doesn't work.
You have to target <ul> when input#A is clicked. <ul> is the sibling of input#A.
Change the css code on line 81 as below
input#A:checked ~ ul li {
display: block;
max-height: 100%;
}
This code change will make your sub-menu visible when you click Menu as shown in below image.
i'm mentioning the fix only for this particular point. In your codepen i can see that you've made this same mistake in few other places. You have to fix it.
Hope this helps.
My code is as shown below:
xyz.scss
.menu-about {
display: none;
}
header {
display: none;
}
.container {
background-color: yellow;
width: 100%;
height: 100%;
}
#q-nav-about {
width: 100%;
height: 4rem;
position: fixed;
display: flex;
align-items: center;
top: 0;
background-color: white;
z-index: 3000;
.q-logo {
margin-left: 1rem;
width: 99px;
height: 50px;
}
ul {
flex: 1;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.q-nav-about {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
ul li {
list-style: none;
}
.q-nav-work {
position: relative;
color: #898989;
font-size: 18px;
text-decoration: none;
font-family: $f3;
padding: 0rem 2rem 0rem 2rem;
}
.q-nav-contact {
position: relative;
color: #898989;
text-decoration: none;
font-size: 18px;
font-family: $f3;
padding: 0rem 8rem 0rem 2rem;
}
}
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 100% !important;
background-color: blue;
.row {
.no-padding {
padding: 0 !important;
margin: 0 !important;
}
}
}
xyz.html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.js" async></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<img class="mob-logo-about" src="../image/logo_logo.svg" alt="New york">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu-about">
<ul>
<a href="/template/about-us.html">
<li>About us</li>
</a>
<a href="#work">
<li>Products</li>
</a>
<a href="#contact-us">
<li>Contact</li>
</a>
</ul>
</div>
<div id="q-nav-about">
<img class="q-logo" src="../image/logo_logo.svg" alt="New york">
<ul>
<li><a class="q-nav-about " href="/template/xyz.html">xyz</a>
</li>
<li><a class="q-nav-work" href="#abx">abx</a>
</li>
<li><a class="q-nav-contact" href="#lll">lll</a>
</li>
</ul>
</div>
<div class="container r-contact-container">
<div class="row">
<div class="col-sm-8 no-padding">hdbdasjhdasdhjsda</div>
<div class="col-sm-4 no-padding">sdcdbcjdhhddahs</div>
</div>
</div>
</body>
</html>
My layout looks as shown below:
You need to add the below CSS:
html, body{
height:100%;
width:100%;
}
Then you can adjust the height of the r-contact-container.
.r-contact-container {
margin-top: 4rem;
width: 100%;
height: 86% !important;
background-color: blue;
}
This height can be adjusted, I have just used 86%.
JSFiddle Demo
You can use other unit of measure, you can try using:
height: 100vh.
"100vh" is 100% of height of window screen.
I've made a website for a school project and want to improve the design a little more. I think the logo makes the header a little bit to big. So I want to move my navbar from under the header to inside the header, to make it look smaller. That's all. I'll post the code and photos underneath.
This is how it looks now
How I want it to be
/* -----------------------
Layout
------------------------*/
.container {
max-width: 70em;
margin: 0 auto;
}
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
}
.header-heading {
margin: 0;
max-width: 300px;
margin-left: 400px;
max-height: 300px;
}
.nav-bar {
background: #e9f1f1;
padding: 0;
}
.content {
overflow: hidden;
padding: 1em 1.25em;
background-color: #fff;
}
.main,
.zijkant {
margin-bottom: 1em;
}
.footer {
color: #fff;
background: #656565;
padding: 1em 1.25em;
}
/* -----------------------
Navbar
------------------------*/
.nav {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Open Sans Condensed', sans-serif;
}
.nav li {
display: inline;
margin: 0;
}
.nav a {
display: block;
padding: .7em 1.25em;
color: #black;
text-decoration: none;
border-bottom: 1px solid gray;
}
.nav a:link {
color: black;
}
.nav a:visited {
color: black;
}
.nav a:focus {
color: black;
background-color: white;
}
.nav a:hover {
color: black;
background-color: #eededb;
}
.nav a:active {
color: white;
background-color: #f4ebe9;
}
<!DOCTYPE html>
<html lang="nl">
<head>
<link rel="stylesheet" href="etc/css/styles.css">
</head>
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "-20%"
}
</script>
<body onload="zoom()">
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</body>
</html>
Put the image container and navbar in the same container:
<div class="header">
<div class="container">
<img src="etc/img/logo-wec.png" class="header-heading"></img>
</div>
<div class="nav-bar">
<div class="container">
<ul class="nav">
<li><a class="active" href="index.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Producten
</li>
<li>ROC
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
Give the header position relative and the position the navbar using absolute positioning:
.header {
font-family: 'Handlee', cursive;
color: #fff;
background: #7eabac;
padding: 0.5em 0em;
position: relative;
}
.nav-bar{
position: absolute;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 50px;//adjust to center vertically
width: 300px;//adjust to your liking
}
You have to set a height to nav-bar in order to make sure it is centered vertically
I am trying to add a div between the header and footer. Both are flex boxes, however the div in between (which in the end needs to be a slider) does not get positioned well. I am trying to get the header on top and the slider to fill up the remaining space of the view height. Only on the scroll it should show the footer (and eventually other div's as well). Somehow I have the feeling flex box is not working correctly..
Basically the same effect as this website: ArsThanea.
Another problem that I have when opening the JSFiddle is that the header and footer do not take the complete width of the view box, although the div does. When running the html and css in the browser using Gulp / Jekyll it works and it takes up the complete width.
header {
height: 130px;
background: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
header .logo img {
height: 73px;
width: 146px;
padding-left: 60px;
}
header p {
text-transform: uppercase;
font-family: 'StratumNo1';
font-size: 14px;
margin: 0;
padding-left: 50px;
}
header .site-nav {
margin-left: auto;
}
header .site-nav ul {
list-style: none;
margin: 0;
}
header .site-nav ul li {
display: inline;
font-family: 'StratumNo1';
color: black;
margin: 10px;
text-transform: uppercase;
font-size: 14px;
}
header .site-nav ul li a {
text-decoration: none;
color: black;
}
header .site-nav ul li a:hover {
text-decoration: underline;
}
header .site-nav ul li a:first-child {
margin: 0px 10px 0 0;
}
header .search-form {
width: 300px;
height: 20px;
margin-left: 10px;
}
header .search-form .search-input {
width: 240px;
border-bottom: black 1px solid;
border-left: 0;
border-right: 0;
border-top: 0;
font-family: 'StratumNo1';
font-size: 14px;
}
header .search-form .search-input:focus {
outline: 0;
}
.footer-lockup {
height: 100px;
background-color: #1d1c1c;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.footer-lockup .copyright {
margin: 0;
color: white;
font-size: 14px;
font-family: 'Open Sans Light';
margin-left: 60px;
color: #4d4c4c;
width: auto;
}
.footer-lockup ul {
list-style: none;
margin-right: 60px;
padding: 0;
}
.footer-lockup ul li {
display: inline;
font-family: 'Open Sans Light';
font-size: 14px;
margin: 10px;
text-transform: uppercase;
}
.footer-lockup ul li:last-child {
margin-right: 0px;
}
.footer-lockup ul li a {
text-decoration: none;
color: #4d4c4c;
}
.social-logos {
position: relative;
min-width: 200px;
display: -ms-flexbox;
display: flex;
}
.social-logos .social-logo {
height: 20px;
min-width: 20px;
margin-right: 18px;
}
.social-logos .social-logo:last-child {
margin-right: 0;
}
.social-logos .social-logo .social-media {
text-align: center;
height: 20px;
cursor: pointer;
}
.social-logos .social-logo img {
height: 20px;
}
.social-logos .social-logo img.youtube {
height: 35px;
margin-top: -7px;
}
.projects-wrapper {
display: block;
background: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
<header>
<div class="logo">
<img src="/assets/img/YourLogo.svg" />
</div>
<p>Your Placeholder Text</p>
<nav class="site-nav">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</nav>
<form class="search-form">
<input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
</form>
</header>
<div class="projects-wrapper"></div>
<footer>
<div class="footer-lockup">
<p class="copyright">© 2016 “Your Company Name” All rights reserved</p>
<div class="social-logos">
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/behance-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/facebook-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/linkedin-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/twitter-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/youtube-icon.svg" class="youtube" />
</div>
</div>
</div>
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</footer>
DEMO: JSFiddle
Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :
position: absolute
you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.
Secondly, add a wrapper to your entire project body & Make that flex. like so
<div class="wrapper"> //this should be flex
<header>..</header> //this "could" be flex depending on its contents
<div class="projects-wrapper"></div>
<footer>...</footer> //this "could" be flex depending on its contents
</div>
let me know if you are facing any other problems
I made code for You, please have a look, and tell mi is it good for You.
fiddle
I use calc() to do that
Use 100vh to get the 100% view-port height and subtract the height of header and footer.
min-height: calc(100vh - 50px);
where 50px is the height of header+footer.
partial support for ie