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.
Related
I want to make this header but I stucked
I tried to place it in different ways, but nothing worked. How can I place the text near the logo and make an indent from the edge of the button?
https://codepen.io/Pero-Kairu/pen/mdXvaBV
<header class="header">
<div class="wrap_logo">
<img class="logo" src="icons/logo.svg" alt="Logo">
<p class="name">Travel Portal</p>
</div>
<nav>
<ul class="nav_links">
<li>How It Works</li>
<li>Plan Your Trip</li>
<li>Destinations</li>
<li>Travel Stories</li>
</ul>
</nav>
<form class="login_button">
<input type="button" value="Login">
</form>
</header>
li, a, button {
text-decoration: none;
color: white;
}
li{
list-style-type: none;
}
header {
display: flex;
position: fixed;
justify-content: space-between;
align-items: center;
width: 100%;
height: 90px;
background-color: rgba(242, 120, 92, 0.7);
color: white;
}
.nav_links li {
display: inline-block;
margin: 0 42px;
}
Please use this full HTML markup & CSS code. It's the perfect code for desktop devices. I hope it will help you better.
<header class="header">
<div class="wrap_logo">
<a href="index.html">
<img class="logo" src="https://icon-library.com/images/avatar-png-icon/avatar-png-icon-13.jpg" alt="Logo">
<span class="name">Travel Portal</span>
</a>
</div>
<nav>
<ul class="nav_links">
<li>How It Works</li>
<li>Plan Your Trip</li>
<li>Destinations</li>
<li>Travel Stories</li>
</ul>
</nav>
<form action="#" class="login_button">
<input type="button" value="Login">
</form>
</header>
.header {
top: 0;
left: 0;
right: 0;
z-index: 999;
display: flex;
position: fixed;
padding: 15px 20px;
align-items: center;
justify-content: space-between;
background-color: rgba(242, 120, 92, 0.7);
}
.header .wrap_logo > a {
color: #ffffff;
font-size: 20px;
font-weight: bold;
align-items: center;
display: inline-flex;
}
.header .wrap_logo img {
max-width: 40px;
margin-right: 10px;
}
.header .nav_links {
margin: 0;
padding: 0;
}
.header .nav_links > li {
display: inline-block;
}
.header .nav_links > li:not(:last-child) {
margin: 0 42px 0 0;
}
.header .nav_links > li > a {
color: #ffffff;
font-size: 16px;
font-weight: 500;
}
Let me know if you need any other help.
Thank You.
All you are missing is some styling in your .wrap_logo class:
.wrap_logo {
display: flex;
align-items: center;
}
Also if you want to have some space between the elements and the borders of the page you can just add some padding.
Try it:
.logo{
position: absolute;
margin-top: 15px;
}
.name{
posirion: absolute;
margin-left: 70px;
}
I've been trying to search for a solution but I couldn't find any yet.
I would like to make a transparent navigational menu bar with a hero section just like in this website here https://paragonmigration.com/
I'm having trouble with the image part where the navigation menu overlapses it.
This is what I have done so far with html:
body {
padding: 0;
margin: 0;
width: 100%; /* fixes white space on the right side */
overflow-x: hidden; /* fixes white space on the right side */
}
h4 {
font-size: 18px;
}
/*#top-header {
height: 39px;
background-color: #36404a;
color: #fff;
line-height: 39px;
padding-left: 50px;
margin: 0;
padding: 0;
}*/
.top-header {
display: flex;
background-color: #36404a;
color: #fff;
height: 39px;
align-items: center;
}
.top-header > div {
margin: 0 15px;
}
.top-header > div > i {
margin-right: 5px;
}
.top-header-address {
padding-left: 50px;
}
.top-header-email {
flex: 2;
}
.top-header-facebook {
flex-basis: 2em;
}
.top-header-facebook a {
color: #fff;
}
.top-header-book {
display: flex; /* in order to center the elements inside */
background-color: #fa0505;
flex-basis: 251px;
height: 100%; /* in order to entirely stretch and fill to the parent element's* height */
align-items: center;
justify-content: center;
}
/* remove the right margin for the last div */
.top-header div:nth-last-child(1) {
margin: 0;
}
.top-header-book a {
text-decoration: none;
color: #fff;
margin-right: 5px;
font-weight: bold;
}
/*
#site-header-menu {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
*/
.nav-menu {
display: flex;
height: 80px;
background-color: rgba(255, 255, 255, 0.6);
align-items: center;
}
/* add sticky functionality to navigation menu */
.sticky {
position: fixed;
top: 0;
width: 100%;
background-color: #36404a;
color: #fff;
z-index: 2;
}
.sticky.nav-menu ul li a {
color: #fff;
}
.logo img {
height: 75px;
width: 156px;
}
.nav-menu ul {
display: flex;
flex: 4;
/*height: 100%;*/
justify-content: center;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav-menu ul > li {
font-size: 14px;
margin: 0 10px;
}
.nav-menu ul li a {
text-decoration: none;
color: #000;
}
.have-questions {
display: flex;
align-items: center;
justify-items: center;
text-align: center;
}
.message-icon i {
color: red;
}
.questions {
font-size: 18px;
margin: 10px;
line-height: 1.5em;
}
#slider {
position: relative;
top: -150px;
padding: 0;
background: url('../assets/images/slide.jpg') no-repeat center center fixed;
/* background-size: cover;*/
height: 750px;
color: #fff;
z-index: -1;
}
<div id="site-header-menu">
<div class="container top-header">
<div class="top-header-address">
<i class="fas fa-map-marker-alt"></i>
Address: 2903, Single Business Tower, Dubai
</div>
<div class="top-header-email">
<i class="far fa-envelope"></i>
Email Address: info#paragonmigration.com
</div>
<div class="top-header-facebook">
<i class="fab fa-facebook-f"></i>
</div>
<div class="top-header-book">
Book A Consultation
<i class="fas fa-long-arrow-alt-right"></i>
</div>
</div><!-- #site-header-menu -->
<div class="nav-menu" id="nav-menu">
<div class="logo"><img src="assets/images/logo.png" alt="logo"></div>
<ul>
<li>HOME</li>
<li>ABOUT US</li>
<li>CANADA</li>
<li>POLAND</li>
<li>AUSTRALIA</li>
<li>NEW ZEALAND</li>
<li>UK</li>
<li>CONTACT US</li>
</ul>
<div class="have-questions">
<div class="message-icon"><i class="far fa-comment-alt fa-3x"></i></div>
<div class="questions">
<div>Have any Questions?</div>
<div>04 303 3000</div>
</div>
</div>
</div><!-- .nav-menu -->
</div><!-- site-header-menu -->
<div id="slider">
<p id="welcome">WELCOME TO PARAGON</p>
<p id="migration">Migration and Visa</p>
<p id="consultants"><em>Consultants</em></p>
LEARN MORE >
</div><!-- #slider -->
I'm creating a website and wanted to put the contact info in the footer. I created the footer using several nested divs: a footer div --> footer-container div --> footer-left div and footer-right div (using display: flex i put them side by side with each other). The footer-left div contains a ul (unordered list) of external links; the footer-right div contains social media icons. I've included the code below:
.footer {
height: 150px;
width: 100vw;
background-color: #7D594F;
}
.footer-container {
display: block;
justify-content: space-between;
align-items: center;
}
.footer-left {
border: 2px solid red;
}
.footer-left ul {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
border: 2px solid blue;
}
.footer-left ul li {
color: #ffffff;
font-family: montserrat, sans-serif;
text-shadow: none;
text-align: center;
margin: 0px;
width: 150px;
border: 2px solid green;
}
.footer-right {
display: flex;
justify-content: center;
align-items: center;
}
/*to scale down the icons, the #facebook should always be 10px bigger than the #instagram*/
#facebook {
height: 40px;
width: 40px;
}
#instagram {
height: 30px;
width: 30px;
}
.footer p {
color: #ffffff;
font-family: montserrat, sans-serif;
font-size: 10px;
text-align: center;
}
<div class="footer">
<div class="footer-container">
<!--Using flex to push both containers on opposite sides of the footer-->
<div class="footer-left">
<ul>
<li>About</li>
<li>Contact</li>
<li>We Are Hiring</li>
<li>Our Financial Services</li>
<li>Our Legal Services</li>
<li>Kangen Water</li>
</ul>
</div>
<div class="footer-right">
<img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook">
<img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram">
</div>
</div>
</div>
But the unordered list is not visible. I created bordered around each element to make it easier to visualize:
body {
margin: 0;
}
.footer {
height: 150px;
width: 100vw;
background-color: #7D594F;
}
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-left {
border: 2px solid red;
}
.footer-left ul {
display: flex;
/*flex-flow: column nowrap;*/
flex-flow: row wrap;
justify-content: space-around;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
border: 2px solid blue;
}
.footer-left ul li {
color: #ffffff;
font-family: montserrat, sans-serif;
text-shadow: none;
text-align: center;
margin: 0px;
padding: .5em 1em;
width: 150px;
border: 2px solid green;
}
.footer-right {
display: flex;
justify-content: around;
align-items: center;
}
/*to scale down the icons, the #facebook should always be 10px bigger than the #instagram*/
#facebook {
height: 40px;
width: 40px;
}
#instagram {
height: 30px;
width: 30px;
}
.footer p {
color: #ffffff;
font-family: montserrat, sans-serif;
font-size: 10px;
text-align: center;
}
<div class="footer">
<div class="footer-container">
<!--Using flex to push both containers on opposite sides of the footer-->
<div class="footer-left">
<ul>
<li>About</li>
<li>Contact</li>
<li>We Are Hiring</li>
<li>Our Financial Services</li>
<li>Our Legal Services</li>
<li>Kangen Water</li>
</ul>
</div>
<div class="footer-right">
<img id="facebook" src="/images/icons/noun_social media icon_2255034.png" alt="Link to Facebook">
<img id="instagram" src="/images/icons/noun_instagram_3350460.png" alt="Link to Instagram">
</div>
</div>
</div>
I have made a navbar with flex properties. Now I wish to add a drop down menu to a element in navbar, but it doesn't worked as expected.
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
ul.drop-menu li {
display: none;
list-style: none;
}
li:hover > ul.drop-menu li {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
I want the dropdown menu with the flex container so that i can create 4 columns of full page width, also I will make drop down menu on other tabs too.
By adding position: relative to the nav and position: absolute to the dropdown, will make the dropdown position/size relative to the nav
Setting flex: 1 on the dropdown's flex items (li) will make them stretch horizontally
Updated/added these 3 rules
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
li:hover > ul.drop-menu li {
display: flex;
flex: 1;
}
li > ul.drop-menu {
position: absolute;
display: flex;
left: 0;
top: 100%;
width: 100%;
}
Stack snippet
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
position: relative;
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
ul.drop-menu li {
display: none;
list-style: none;
}
li:hover > ul.drop-menu li {
display: flex;
flex: 1;
}
li > ul.drop-menu {
position: absolute;
display: flex;
left: 0;
top: 100%;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Navbar</title>
<link rel="stylesheet" href="nav.css">
</head>
<body>
<nav>
<ul class="left">
<li class="logo">SoulOTrip</li>
<li >
Adventure Trips
<ul class="drop-menu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</li>
<li>Top Destinations</li>
<li>Explore</li>
</ul>
<ul class="right">
<li class="">Username</li>
<li class="">Login</li>
<li class="">Register</li>
</ul>
</nav>
</body>
</html>
You don't need display:flex for li elements in dropdown
#font-face {
font-family: Oxygen;
src: url('https://fonts.googleapis.com/css?family=Oxygen');
}
body{
margin: 0;
}
nav {
background-color: #f8f8f8;
display: flex;
justify-content: space-between;
}
nav ul {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-start;
margin: 0;
}
nav ul>li{
position:relative;
}
nav a {
text-decoration: none;
color: #777;
padding: 15px;
font-family: sans-serif;
font-size: 18px;
}
nav a:hover {
color: #000;
}
.logo a {
font-size: 25px;
}
nav ul {
list-style: none;
}
ul.left>li.drop-menu{
display:none;
position:absolute;
left:0;
}
.drop-menu li{
display:block;
}
ul.left>li:hover .drop-menu{
display:block;
}
I developed a large responsive_flex.css file for my works and my jumperl.com site.
While I was simplifying to the maximum, I found this post, here is the solution good man.
/* Menu Dropdown! please use div */
.dropdown{
display: flex;
flex-wrap: wrap;
flex-direction:column;
}
.dropdown > .dropdown-title{
/* put the height and width here! */
}
.dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column; /* or row */
}
.dropdown:hover > .dropdown-sub {
display: flex;
}.dropdown:hover > .dropdown-sub > .dropdown-option:hover{
background-color: #abcdef;
}
<div class="dropdown" style="background-color:#aaa;">
<div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
<div class="dropdown-sub" style="background-color: #cccccc;">
<div class="dropdown-option">option 1</div>
<div class="dropdown-option">option 2</div>
<div class="dropdown-option">option 3</div>
</div>
</div>
this resolve one problem about likely position abosolute on sub menu.
Perdón my poor english amico mio
/* Menu Dropdown! please use div */
.dropdown{
display: flex;
flex-wrap:wrap;
flex-direction: row; /* or column */
/* put the height and width here! */
}
.dropdown > .dropdown-title{
width: 100%;
height: 100%;
}
.dropdown > .dropdown-sub{
display: none;
z-index: 1;
flex-direction: column; /* or row */
/* width: 100%; */
}
.dropdown:hover > .dropdown-sub {
display: flex;
}.dropdown:hover > .dropdown-sub > .dropdown-option:hover{
/* background-color: #abcdef; */
}
<div class=" dropdown" style="background-color:#aaa;height: 20px;">
<div class="dropdown-title" style="background-color:#bbb; border:1px solid #000000;">Titulo</div>
<div class="dropdown-sub" style="background-color: #cccccc;">
<div class="dropdown-option">option 1</div>
<div class="dropdown-option">option 2</div>
<div class="dropdown-option">option 3</div>
</div>
</div>
<div>Random bottom item</div>
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