I am having trouble making the footer, row section, and h1 in the header responsive for my site. The footer and row section have three column layouts, with the section having boxes. When I resize the page, the text goes all over the place and the h1 disappears. The three boxes stack on top of each other and I want them to be under each other when the page gets resized. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>ComPack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="styles/normalize.css" />
<link rel="stylesheet" href="styles/challenge.css" />
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="images/06926FRH.jpg" alt="">
<h1 class="com">ComPack</h1>
</header>
<nav>
Home
Solutions
Services
Locations
Support
</nav>
<section class="row">
<article id="results">
<h2>Results</h2>
<p>Unde quae quidem earum, at, ullam officiis minus! Facilis incidunt impedit cum unde quae, neque debitis reiciendis perspiciatis asperiores dolor totam culpa, soluta sapiente veritatis. Accusantium illum quisquam, repellendus temporibus!</p>
</article>
<article id="partners">
<h2>Partners</h2>
<p>Adipisci soluta, voluptas perferendis illo, quas culpa doloribus? Nulla quibusdam, eveniet consectetur enim voluptatibus nam quos minus, aliquam voluptatum quis. Velit nesciunt quam, quidem praesentium laudantium nostrum nobis iusto animi.</p>
</article>
<article id="future">
<h2>Future</h2>
<p>Nam recusandae nihil harum animi excepturi nulla qui laborum sed illo repudiandae numquam quibusdam eaque, eius culpa unde pariatur suscipit inventore quos iure saepe at dolor fuga ea. Aperiam, ex.</p>
</article>
</section>
<footer class="row2">
<div id="copyright">
<p><small>Copyright © 2017 ComPack, Inc.</small></p>
</div>
<div id="contactUs">
<h3>Contact Us</h3>
<ul>
<li>Customer Service</li>
<li>Sales</li>
<li>Technical Support</li>
</ul>
</div>
<div id="resources">
<h3>Resources</h3>
<ul>
<li>Cumque amet aspernatur</li>
<li>Aut perspiciatis consequuntur</li>
<li>Accusantium nihil illum</li>
</ul>
</div>
</footer>
</body>
</html>
.com {
top: -34rem;
position: relative;
font-size: 4vw;
padding-left: 2.5rem;
font-family: 'Amiri', serif;
}
nav {
background-color: #222;
position: fixed;
top: 0;
width: 100%;
flex: auto;
}
nav a {
float: left;
display: block;
text-align: center;
padding: 14px 40px;
text-decoration: none;
font-size: 17px;
color: beige;
}
nav a:hover {
color: lightcoral;
}
footer {
background-color: #222;
color: beige;
}
footer a {
color: beige;
}
header {
color: #36a;
}
img {
width: 100%;
margin-top: 3rem;
}
#contactUs a:hover {
color: lightcoral;
}
#resources a:hover {
color: lightcoral;
}
#results {
float: left;
width: 27%;
padding: 0rem 1.1rem .2rem 1.5rem;
border-radius: 1px 1px 1px 1px;
margin-left: 9rem;
margin-top: -8rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
#partners {
float: left;
width: 27%;
padding: 0rem 1.1rem .2rem 1.5rem;
margin-left: 3.5rem;
margin-top: -8rem;
margin-bottom: 2rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
#future {
float: left;
width: 27%;
margin-top: -8rem;
margin-left: 3rem;
padding: 0rem 1.1rem .2rem 1.5rem;
width: 300px;
box-shadow: 2px 2px 2px 2px rgba(170, 170, 170, 0.42);
flex: 1;
}
.row:after {
content: "";
display: flex;
clear: both;
}
#copyright {
float: left;
padding-left: 3rem;
margin-top: 5.3rem;
}
#resources {
float: left;
padding-left: 20.5rem;
margin-top: -8rem;
}
#contactUs {
float: left;
padding-left: 45rem;
margin-top: .2rem;
}
.row2:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
#copyright {
width: 100%;
}
#contactUs {
width: 100%;
}
#resources {
width: 100%;
}
}
a {
text-decoration: none;
}
ul {
list-style-type: none;
}
Help is appreciated.
Your articles need to be in a flex container for them to be put in a layout correctly. Take a look at this, I removed the row class (You can keep it) and changed it to container, which I only gave this property display: flex;
https://jsfiddle.net/4kzpjhe6/ You can see it here, it isn't fully corrected but is a better place to start.
<!DOCTYPE html>
<html lang="en">
<head>
<title>ComPack</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="styles/normalize.css" />
<link rel="stylesheet" href="styles/challenge.css" />
<link href="https://fonts.googleapis.com/css2?family=Amiri&display=swap" rel="stylesheet">
</head>
<body>
<header>
<img src="images/06926FRH.jpg" alt="">
<h1 class="com">ComPack</h1>
</header>
<nav>
Home
Solutions
Services
Locations
Support
</nav>
<section class="container">
<article id="results">
<h2>Results</h2>
<p>Unde quae quidem earum, at, ullam officiis minus! Facilis incidunt impedit cum unde quae, neque debitis reiciendis perspiciatis asperiores dolor totam culpa, soluta sapiente veritatis. Accusantium illum quisquam, repellendus temporibus!</p>
</article>
<article id="partners">
<h2>Partners</h2>
<p>Adipisci soluta, voluptas perferendis illo, quas culpa doloribus? Nulla quibusdam, eveniet consectetur enim voluptatibus nam quos minus, aliquam voluptatum quis. Velit nesciunt quam, quidem praesentium laudantium nostrum nobis iusto animi.</p>
</article>
<article id="future">
<h2>Future</h2>
<p>Nam recusandae nihil harum animi excepturi nulla qui laborum sed illo repudiandae numquam quibusdam eaque, eius culpa unde pariatur suscipit inventore quos iure saepe at dolor fuga ea. Aperiam, ex.</p>
</article>
</section>
<footer class="row2">
<div id="copyright">
<p><small>Copyright © 2017 ComPack, Inc.</small></p>
</div>
<div id="contactUs">
<h3>Contact Us</h3>
<ul>
<li>Customer Service</li>
<li>Sales</li>
<li>Technical Support</li>
</ul>
</div>
<div id="resources">
<h3>Resources</h3>
<ul>
<li>Cumque amet aspernatur</li>
<li>Aut perspiciatis consequuntur</li>
<li>Accusantium nihil illum</li>
</ul>
</div>
</footer>
</body>
</html>
Related
I want to add a profile picture on the left side of the home in the navigation panel can anyone tell me how can I do that without javascript just using HTML and CSS
I want a picture on the top left part of the webpage and I tried many time and can't figure out how
Thank You
--------------------------------------------------------------------------------------
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PS 2</title>
<style>
*{
padding: 0;
margin: 0;
}
header{
background-color: black;
color: white;
position: sticky;
top: 0;
}
ul{
padding: 19px;
}
li{
list-style: none;
display: inline;
padding: 0 53px;
font-size: 33px;
}
.container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.left{
background-color: red;
height: 80vh;
width: 40vw;
}
.right{
background-color: blue;
height: 80vh;
width: 40vw;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi modi natus?
</p>
</div>
<div class="right">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
</p>
</div>
</div>
</body>
</html>
I've made your nav a flex container and used a div to place your image on the lhs of your navbar. The image is placed in the center of the div using grid and place-items:center.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background-color: black;
color: white;
position: sticky;
top: 0;
}
nav {
display: flex;
padding: 1rem 2rem;
}
.image {
flex: 0 1 auto;
display: grid;
place-items: center;
}
.image>img {
width: 4rem;
}
ul {
padding: 19px;
}
li {
list-style: none;
display: inline;
padding: 0 53px;
font-size: 33px;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
}
.left {
background-color: red;
height: 80vh;
width: 40vw;
}
.right {
background-color: blue;
height: 80vh;
width: 40vw;
}
<header>
<nav>
<div class="image"><img src="https://www.fillmurray.com/500/500"></div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="container">
<div class="left">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis consequuntur porro recusandae beatae, debitis sapiente, adipisci nostrum voluptate pariatur veniam, aliquid iusto consequatur nemo quidem. Quia eveniet fugit mollitia tempora harum eligendi
modi natus?
</p>
</div>
<div class="right">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Enim, totam sapiente unde quos, quia dolor et natus tenetur, nesciunt tempora cum. Facilis laboriosam quas consectetur, placeat adipisci consequuntur consequatur cupiditate deserunt veritatis odit
natus delectus tempore possimus, aspernatur ex amet quaerat vero sequi praesentium inventore. Facere distinctio magni, praesentium modi nemo sit quibusdam laudantium molestiae. Provident.
</p>
</div>
</div>
change your css header to
header{
background-color: black;
color: white;
position: sticky;
top: 0;
display: flex;
align-items: center;
}
and add the class
.header-img {
width: 50px;
height: 50px;
background-color: red;
margin: 10px;
}
and now you can add in your html header
<img class="header-img" src=""/>
in src="" you can chose the path of your img
Add a list element in the header.
<ul>
<li><img src="https://smaller-pictures.appspot.com/images/dreamstime_xxl_65780868_small.jpg" alt="Girl in a jacket" width="50" height="50"></li>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
I want to create this mini website I am trying but I have some problems.
1- I want to color the ul list but only 2 of them work.
2- there is white space in the width I am trying to minimize the width of but didn't work ,
I copied the code on codepen and this is a picture of what I want. Please help me . thank you.
This is how the program looks like:
This is my code: https://codepen.io/aminanba/pen/VwpOZRB
article{
width: 80%;
}
.item1 {
grid-area:item1;
border: 2px solid black;
}
.item2 {
grid-area: item2;
border: 2px solid black;
}
.item3 {
grid-area: item3;
border: 2px solid black;
}
.item4 {
grid-area: item4;
border: 2px solid black;
}
.item5 {
grid-area: item5;
border: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25% 25% 75%;
grid-template-rows: auto;
grid-template-areas:
"item1 item2 item2 item3"
"item4 item5 item5 item5"
;
}
h3{
font-style: italic;
text-align: center;
}
p{
margin: 10px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
To fix the first one you need to close your a tags, like this;
<ul class="grid-item item5">
<li>Politics</li>
<li>Technology</li>
<li>Local</li>
<li>Opinion</li>
<li>Sports</li>
</ul>
For the second one you need to make sure you do not have and margin or padding in your ul / li elements. By default the browser adds some padding to the elements. To fix this just set it to 0 for every element at the start of your stylesheet and then add margin/padding accordingly. So in your css just add at the very top the following;
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
i fix this with css grid but in the second section i used flexbox it is usefull
*{
box-sizing: border-box;
}
header{
text-align: center;
font-family: 'Merienda', cursive;
margin-bottom: 45px;
}
article{
width: 80%;
}
.item1 {
grid-area:item1;
border: 2px solid black;
}
.item2 {
grid-area: item2;
border: 2px solid black;
}
.item3 {
grid-area: item3;
border: 2px solid black;
}
.item4 {
grid-area: item4;
border: 2px solid black;
}
.item5 {
grid-area: item5;
border: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: 25% 50% 25% 25% 75%;
grid-template-rows: auto;
grid-template-areas:
"item1 item2 item2 item3"
"item4 item5 item5 item5"
;
}
h3{
font-style: italic;
text-align: center;
font-weight: normal;
font-size: 1.3em;
padding-bottom: 10px;
}
p{
margin: 10px;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
.other-sections {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 100%;
padding: 0;
margin: 0;
}
.site-section {
display: flex;
align-items: center;
flex: 1;
}
.section-link {
color: black;
text-decoration: none;
font-size: 30px;
padding-left: 30px;
font-weight: bold;
font-family: "Futura";
color: #666;
}
.section-link:hover {
text-decoration: underline;
}
.site-section-local {
background-color: #55efc4;
}
.site-section-tech {
background-color: #81ecec;
}
.site-section-opinion {
background-color: #74b9ff;
}
.site-section-sports {
background-color: #a29bfe;
}
.site-section-politics {
background-color: #ffeaa7;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Papers</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Merienda&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>The News Times</h1>
</header>
<article class="grid-container">
<section class="item1">
<div class="grid-item">
<h3>Student Learns HTML</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non! Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem labore fugiat
neque nostrum porro vero fugit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius odio
neque incidunt esse fuga veritatis ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo,
ad laudantium cupiditate aspernatur eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</div>
</section >
<section class="item2">
<div class="grid-item">
<h3>BREAKING: Puppies Are Adorable</h3>
<img src="http://placecorgi.com/300/150" style="width:100%;" />
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, dolores? Illo dolores, rerum iste aut porro doloribus fugit itaque voluptas</p>.
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium incidunt ullam ea magni ipsam perferendis ratione pariatur enim repellendus quia?</p>
</div>
</section >
<section class="item3">
<div class="grid-item">
<h3>CSS Is Apparently a Thing</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic ad in quas alias non! Expedita similique et dolore illum
doloremque vel accusantium ut eos tempora sequi, doloribus vitae mollitia praesentium ex ullam? Dolorem labore fugiat
neque nostrum porro vero fugit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam corrupti, eius odio
neque incidunt esse fuga veritatis ipsum, eligendi mollitia, porro quasi provident nisi sit! Doloribus, eligendi nemo,
ad laudantium cupiditate aspernatur eveniet asperiores modi praesentium voluptas eos sunt odio.</p>
</div>
</section>
<section class="item4">
<div class="grid-item">
<h3>Boy Likes Turtles</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, perferendis! Accusamus asperiores quod vitae architecto natus alias fugiat aliquam unde sint expedita repellat rerum, obcaecati hic placeat recusandae quaerat. Dolores excepturi earum minus magni! Animi aperiam eligendi molestias necessitatibus ducimus.
Voluptate, ut, cupiditate ducimus vitae blanditiis ex impedit debitis est tempora dolores nam sed. Esse nobis ea inventore qui enim quia beatae ab commodi laboriosam quam aliquam aut perspiciatis fuga nam rerum temporibus voluptatum explicabo voluptate, pariatur ullam laudantium eligendi.</p>
</div>
</section>
<section class="item5">
<ul class="story three-quarter other-sections">
<li class="site-section site-section-politics">
<a href="#" class="section-link">
Politics
</a>
</li>
<li class="site-section site-section-tech">
<a href="#" class="section-link">
Technology
</a>
</li>
<li class="site-section site-section-local">
<a href="#" class="section-link">
Local
</a>
</li>
<li class="site-section site-section-opinion">
<a href="#" class="section-link">
Opinion
</a>
</li>
<li class="site-section site-section-sports">
<a href="#" class="section-link">
Sports
</a>
</li>
</ul>
</section>
</article>
<script src="script.js">
</script>
</body>
</html>
I have a flexbox navbar that I've been having great troubles with trying to make responsive (hence the question). I wish for the horizontal padding between the links to decrease as the page width decreases. With the main issue being that I'm unable to stop the contact us link at the end from being overlayed by the browser window when shrunk as shown in photo below.
I am also curious to whether this is possible without the use of media queries or if I'm trying to make things difficult for myself.
Hope someone with some more knowledge than me can help as I've spent far too many hours on this aha.
Phone size screen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/style.css" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
You really want to use justify-content: space-between which is completely flexible and therefore responsive without having to do anything else. If you put it on the head it will have space between the logo and nav and on the .nav-links it will have space between the nav links as you want.
header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
background-color: #ddf2eb;
}
.nav_links {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
max-width: 800px;
}
I can suggest such a way. Sample:
#media (max-width:600px) {
.nav_links li {
padding: 0px 3px;
}
.nav_links li a {
font-size: 11px;
}
}
Link: https://codepen.io/en0ndev/pen/WNoWwOo
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-image: linear-gradient(to top, #ddf2eb, #d3cdd7);
background-repeat: no-repeat;
height: 100vh;
}
header {
display: flex;
padding: 10px 0;
background-color: #ddf2eb;
align-items: center;
}
#logo {
height: 70px;
width: 70px;
cursor: pointer;
flex-shrink: 0;
margin-left: 2%;
}
.nav_links {
list-style: none;
margin-left: 10%;
white-space: nowrap;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0;
font-family: "Montserrat", "sans-serif";
font-weight: 500;
font-size: 15px;
color: #606d5d;
text-decoration: none;
}
.nav_links li a:hover {
color: honeydew;
}
.flex-container {
display: flex;
}
#media (max-width:800px) {
.nav_links li {
padding: 0px 10px;
}
}
#media (max-width:700px) {
.nav_links li {
padding: 0px 5px;
}
.nav_links li a {
font-size: 13px;
}
}
#media (max-width:600px) {
.nav_links li {
padding: 0px 3px;
}
.nav_links li a {
font-size: 11px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/CSS/style.css" />
<title>Home Page</title>
</head>
<body>
<header>
<img src="Images/logo.png" alt="logo" id="logo" />
<!--Logo-->
<nav>
<ul class="nav_links">
<li>Home</li>
<li>Merchandise</li>
<li>About</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
<div class="flex-container">
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque
asperiores veritatis dicta ipsum! Enim cupiditate laborum voluptatem
ipsa incidunt optio nulla facilis natus?
</p>
</div>
</body>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
<div class="column">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui itaque
repellat suscipit voluptas, ad rerum corrupti incidunt assumenda, fugit
amet, recusandae officiis unde similique ullam. Quos magni cupiditate
omnis dignissimos. Repudiandae architecto alias odio modi neque asperiores
veritatis dicta ipsum! Enim cupiditate laborum voluptatem ipsa incidunt
optio nulla facilis natus?
</p>
</div>
</div>
</html>
.nav_links {
display: flex;
list-style: none;
margin-left: 10%;
min-width: 0;
min-height: 0;
max-width: 800px;
}
.nav_links li {
display: inline-block;
padding: 0px 1.5vw;
}
Do this instead. white space: nowrap was was causing it also your padding was set using pixels which arent responsive so i set to vw
so I'm working on a new parallax webpage for a school project. Now when I hover over my dropdown nav menu, the menu get's really dark and unreadable. And also I can't hover over my dropdown menu anymore because it disappears. I changed the z-index to a higher value but that doens't seem to work. Does anyone know how I could fix this?
[
body, html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1,8em;
color: #666;
height: 100%;
margin:0;
}
nav {
width: 100%;
height: 50px;
background:rgba(0,0,0, .8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li a:hover {
background-color: skyblue;
}
nav ul li ul li {
display: none;
}
nav ul li:hover ul li {
display: block;
background: black;
z-index: 99;
position: relative;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat:no-repeat;
background-attachment:fixed;
}
.pimg1{
background-image:url(WallFon.com_11296.jpg);
min-height: 400px;
}
.pimg2{
background-image:url(isp.jpg);
min-height: 400px;
}
.pimg3{
background-image:url(30714.jpg);
min-height: 400px;
}
.section-dark{
text-align:center;
padding:35px 80px;
}
.section-light{
text-align:center;
padding:35px 80px;
}
.section-light{
background-color:#282e34;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align: center;
color: lightgray;
font-size:27px;
letter-spacing:6px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:white;
padding:20px;
}
.ptext .border .trans{
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>
][1]
Here's picture with the images as background[1]: https://i.stack.imgur.com/tgt0j.png
I played a bit with your css. Basically
I lowered the z-index of your .pimg1 to send it behind the navigation dropdown.
Added a dark background to your nav ul li.
Changed your nav ul li a:hover to nav ul li:hover and added cursor: pointer to it.
Changed the nav ul li:hover ul li to nav ul li:hover > ul, nav ul li ul:hover.
I added this summary so it's easier for you to track the changes. Not sure about the colors you wanted but now you can change those appropriately.
body,
html {
background-size: cover;
font-style: normal;
font-family: "Lato";
font-size-adjust: initial;
font-weight: 400;
line-height: 1, 8em;
color: #666;
height: 100%;
margin: 0;
}
nav {
width: 100%;
height: 50px;
background: rgba(0, 0, 0, 0.8);
min-width: 1200px;
}
nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}
nav ul li {
float: left;
width: 210px;
height: 50px;
opacity: 0.8;
line-height: 50px;
text-align: center;
font-size: 20px;
background-color: rgba(0, 0, 0, 0.8);
}
nav ul li a {
text-decoration: none;
color: white;
display: block;
z-index: 1;
}
nav ul li:hover {
background-color: skyblue;
cursor: pointer;
}
nav ul li ul {
display: none;
}
nav ul li:hover > ul,
nav ul li ul:hover {
display: block;
z-index: 99;
position: relative;
}
.pimg1,
.pimg2,
.pimg3 {
position: relative;
opacity: 0.95;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.pimg1 {
background-image: url(WallFon.com_11296.jpg);
min-height: 400px;
z-index: -1;
}
.pimg2 {
background-image: url(isp.jpg);
min-height: 400px;
}
.pimg3 {
background-image: url(30714jpg);
min-height: 400px;
}
.section-dark {
text-align: center;
padding: 35px 80px;
}
.section-light {
text-align: center;
padding: 35px 80px;
}
.section-light {
background-color: #282e34;
color: #ddd;
}
.section-dark {
background-color: #282e34;
color: #ddd;
}
.ptext {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
color: lightgray;
font-size: 27px;
letter-spacing: 6px;
text-transform: uppercase;
}
.ptext .border {
background-color: #111;
color: white;
padding: 20px;
}
.ptext .border .trans {
background-color: transparent;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax webpagina</title>
</head>
<body>
<nav>
<ul>
<li><a>Home</a></li>
<li><a>About us</a></li>
<li><a>Computers</a>
<ul>
<li><a>History of computers</a></li>
<li><a>Types of computers</a></li>
</ul>
</li>
</li>
<li><a>Building</a>
<ul>
<li><a>Recommendation build</a></li>
<li><a>How to build</a></li>
</ul>
</li>
<li><a>Contact</a></li>
</ul>
</nav>
<div class="pimg1">
<div class="ptext">
<span class="border">
Parallax webpage
</span>
</div>
</div>
<section class="section-light">
<h2>Section one</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Two threee
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Two</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Three Section Three
</span>
</div>
</div>
<section class="section-dark">
<h2>Section Three</h2>
<p1>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Delectus deleniti expedita eligendi quos. Autem cum distinctio porro maiores accusamus dignissimos asperiores libero voluptates dolore quaerat qui repudiandae quasi optio ab, accusantium vitae a doloribus earum tenetur animi aliquid delectus modi?
</p1>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
webpageee
</span>
</div>
</div>
</body>
</html>
I have tried to add navigation-menu into my parallax website, but it does not work and I have tried many other methods but it just does not work so I decided to ask here hoping that someone would help. This is my navigation-menu on a parallax website
Below is my code. Any help would be highly appreciated!!
body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('../img/brownie.jpg');
min-height:100%;
}
.pimg2{
background-image:url('../img/image2.jpg');
min-height:400px;
}
.pimg3{
background-image:url('../img/image3.jpg');
min-height:400px;
}
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#f4f4f4;
color:#666;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#000;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
}
.ptext .border{
background-color:#111;
color:#fff;
padding:20px;
}
.ptext .border.trans{
background-color:transparent;
}
#media(max-width:568px){
.pimg1, .pimg2, .pimg3{
background-attachment:scroll;
}
}
a {
/* color: white; */
}
header {
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
background: none;
}
header .logo {
color: black;
height: 50px;
line-height: 50px;
font-size: 24px;
float: left;
font-weight: bold;
}
header nav {
float: right;
}
header nav ul {
margin: 0;
padding: 0;
display: flex;
}
header nav ul li {
list-style: none;
position: relative;
}
header nav ul li.sub-menu:before {
content: '\f078';
font-family: fontAwesome;
position: absolute;
line-height: 50px;
color: white;
right: 1px;
}
header nav ul li.active.sub-menu:before {
content: '\f077';
}
header nav ul li ul {
position: absolute;
left: 0;
background: inherit;
display: none
}
header nav ul li.active ul {
/* use li: hover instead */
display: block;
}
header nav ul li ul li {
display: block;
width: 200px;
}
header nav ul li a {
height: 50px;
line-height: 50px;
padding: 0 20px;
color: black;
text-decoration: none;
display: block;
}
header nav ul li a:hover {
color: #fff;
background: grey;
}
header nav ul li a.active {
background: grey;
}
.menu-toggle {
color: black;
float: right;
line-height: 50px;
font-size: 24px;
cursor: pointer;
display: none
}
#media (max-width: 860px) {
header {
padding: 0 20px;
}
.menu-toggle {
display: block;
}
header nav {
/* use display none or left:-100% to hide the nav */
/* display: none; */
position: absolute;
top: 50px;
left: -100%;
width: 100%;
height: calc(100vh - 50px);
background: #333;
transition: 0.5s;
}
header nav.active {
left: 0;
}
header nav ul {
display: block;
text-align: center;
}
header nav ul li a {
border-bottom: 0.9px solid rgba(0, 0, 0, .2);
}
header nav ul li.active ul {
position: relative;
background: white;
}
header nav ul li ul li {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parallax Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<div class="logo">LOGO </div>
<nav>
<ul>
<li class="sub-menu">Services
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Team</li>
</ul>
</nav>
<div class="menu-toggle">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('.menu-toggle').click(function() {
$('nav').toggleClass('active')
})
$('ul li').click(function() {
$(this).siblings().removeClass('active');
$(this).toggleClass('active');
})
}
)
</script>
<div class="pimg1">
<div class="ptext">
<span class="border">
Cookies
</span>
</div>
</div>
<section class="section section-light">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in. Distinctio provident dolorem modi cumque illo enim quidem tempora deserunt nostrum voluptate labore repellat quisquam quasi cum suscipit dolore ab consequuntur, ad porro earum temporibus. Laborum ad temporibus ex, omnis!
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
Image Two Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Two</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
Image Three Text
</span>
</div>
</div>
<section class="section section-dark">
<h2>Section Three</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus, commodi, fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum praesentium, blanditiis sapiente labore aliquam ipsa architecto vitae. Minima soluta temporibus voluptates inventore commodi cumque esse suscipit optio aliquam et, dolorem a cupiditate nihil fuga laboriosam fugiat placeat dignissimos! Unde eveniet placeat quisquam blanditiis voluptatem doloremque fugiat dolor repellendus ratione in.
</p>
</section>
<div class="pimg1">
<div class="ptext">
<span class="border">
Traversy Media
</span>
</div>
</div>
</body>
</html>
Add z-index property to header:
header {
position: absolute;
top: 0;
left: 0;
padding: 0 100px;
width: 100%;
box-sizing: border-box;
background: none;
z-index: 1;
}
Your header was behind parallax image, because it has position absolute and your parallax image is all over screen.