I made a simple masonry layout using css grid.
My requirement is that I wanted a maximum of 8 columns and make it responsive with the screen size.
Everything works great until I have >=8 bricks in the "masonry". As the number of bricks become <8, I want the 'n' columns to be centered in the 'masonry'.
HTML
<body>
<div class="masonry">
<div class="brick">
<p class="subheading-text">Automobiles</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/235/1672659803.jpeg">
</div>
<div class="brick">
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/233/download (2).jpeg">
</div>
<div class="brick">
<p class="subheading-text">Badhai</p>
<img class="content-img" src="https://www.otgads.com/site_contents/image_Ad/223/advertisement(2).jpeg">
</div>
<div class="brick">
<p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p>
</div>
<div class="brick">
<p class="subheading-text">Business</p>
<p class="content-text"><strong>WANTED</strong> Investor/Partner Rs.3.5 Cr for our Packaging Material mfg Unit Nr. Mumbai 7021629703 9821009496</p>
</div>
<div class="brick">
<p class="subheading-text">Education</p>
<p class="content-text"><strong>Lorem</strong> Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and</p>
</div>
</div>
</body>
CSS
body {
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.masonry {
--masonry-gap: 15px;
--masonry-brick-width: 200px;
column-gap: var(--masonry-gap);
column-fill: initial;
column-width: var(--masonry-brick-width);
max-width: 1740px;
}
.masonry > * {
break-inside: avoid;
margin-bottom: var(--masonry-gap);
}
#supports (grid-template-rows: masonry) {
.masonry {
display: grid;
gap: var(--masonry-gap);
grid-template-rows: masonry;
grid-template-columns: repeat(
auto-fill,
minmax(var(--masonry-brick-width), 1fr)
);
align-tracks: stretch;
}
.masonry > * {
margin-bottom: initial;
}
}
/* some styling not important */
.masonry {
padding: 8px;
}
.content-text {
padding: 10px;
margin: 0px;
border: 1px solid black;
border-radius: 5px;
transition: 0.15s ease-in-out;
}
.content-text:hover {
background-color: antiquewhite;
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
.heading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
background-color: #ca4040;
color: white;
border-radius: 5px;
}
.subheading-text {
margin: 0px;
margin-bottom: 10px;
padding: 10px;
text-align: center;
color: #404eca;
border: 3px solid #404eca;
border-radius: 5px;
}
.content-img {
width: 100%;
transition: 0.15s ease-in-out;
}
.content-img:hover {
box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
transform: translate3d(0px, -1px, 0px);
}
Any help is appreciated.
I tried to center the contents in the 'masonry' div but they were always left aligned if the number of bricks were <8 (max 8 as I have fixed the max-width of 'masonry' div to 1740px)
.masonry {
--masonry-gap: 15px;
--masonry-brick-width: 200px;
column-gap: var(--masonry-gap);
column-fill: initial;
column-width: var(--masonry-brick-width);
max-width: 1740px;
display: grid;
gap: var(--masonry-gap);
grid-template-rows: masonry;
grid-template-columns: repeat(auto-fill, minmax(var(--masonry-brick-width), 1fr));
align-items: center; /* added to center the columns */
align-tracks: stretch;
}
Related
So once upon a time in practicing HTML,CSS and JS I built a pretty website. It was a fully functional one with multiple web pages and used express for backend. I lost its files and left web prog for a while. Now I cannot figure out how to do that again. I went to source from where I learned it but in vain. If I Go-Live the HTML page I created with CSS, It displays corrrectly i.e with the css. However if I use express, it just shows the Html. Yes Plain, old Htmlsss. Hatesss and textsss, No sstylingss.
Here is the javascript
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The website should look like when it is displayed along with css in snippet.
Seriously can't figure out what is and where is it going wrong.
:root {
--black-col: #15191f;
--light-col: #e3ecf3;
}
* {
margin: 0px;
padding: 0px;
}
.cen {
text-align: center;
}
.flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.flex-column {
flex-direction: column;
}
.wrap {
flex-wrap: wrap;
}
.al-cen {
align-items: center;
}
.ju-cen {
justify-content: center;
}
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5vw;
background-color: var(--light-col);
}
div {
margin: 20px 15px;
}
.border-red {
border: 3.5px solid #ffb700d3;
border-radius: 12px;
box-shadow: 7px 7px 3px 1px green;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-green {
border: 3.5px solid green;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px blue;
/* box-shadow: x y blur-radius spread-readius color; */
}
.border-blue {
border: 3.5px solid blue;
border-radius: 5px;
box-shadow: 7px 7px 3px 1px red;
/* box-shadow: x y blur-radius spread-readius color; */
}
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.line-height {
line-height: 8vh;
}
/* NAVIGATION BAR */
.grinav {
display: grid;
grid-template-columns: 1fr 1fr;
}
#timeclock {
justify-content: end;
margin: 0px 0px 0px 0px;
color: var(--black-col);
}
#times {
border: 2px solid var(--light-col);
background-color: var(--light-col);
margin: 0px 2vw 0px 0px;
padding: 5px 20px 5px 20px;
font-weight: bold;
border-radius: 200px;
}
.glowbar {
display: block;
background-color: #ff7700;
box-sizing: border-box;
width: 0%;
margin: 0px 0px 0px 0px;
position: fixed;
height: 4px;
animation-name: fill2;
animation-duration: 4s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
}
#keyframes fill1 {
from {
width: 0%;
background-color: gold;
}
to {
width: 100%;
background-color: #db9b00;
}
}
#keyframes fill2 {
0% {
width: 0%;
background-color: rgb(255, 217, 0);
}
90% {
/* width: 70%; */
background-color: #ff7700;
}
100% {
width: 100%;
background-color: #ff7700;
}
}
nav, .grinav {
position: sticky;
top: 0px;
left: 0px;
width: 100%;
box-sizing: border-box;
margin: 0px 0px 0px 0px;
padding: 5px 5px;
background-color: var(--black-col);
z-index: 2;
}
nav a {
text-decoration: none;
background-color: var(--black-col);
color: var(--light-col);
padding: 4px 10px;
border: 2px;
border-radius: 10px;
}
nav a:hover {
color: #15191f;
/* ff7700 */
transition-property: background-color;
/* transition-property: color; */
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
background-color: var(--light-col);
}
#li1 {
margin-left: 4vw;
}
#a1 {
margin: 0px 1.5vw;
}
#a2 {
margin: 0px 1.5vw;
}
#a3 {
margin: 0px 1.5vw;
}
#a4 {
margin: 0px 1.5vw;
}
nav ul li {
list-style: none;
}
#logo {
width: 3vw;
border: 2px;
border-radius: 100px;
margin: 5px 0px 0px 15px;
}
/* NAVIGATION BAR ENDS */
/* MAIN HEADING */
.heading {
height: 90vh;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.ap {
grid-column-start: 2;
grid-column-end: 2;
margin: 100px 0px 0px 100px;
}
/* If there is a horizontal scroll bar, you can disable it by the following code:{
box-sizing: border-box;
width: 100%;
instead of width: 100vw;
This should solve the problem} */
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
/* background-color: var(--black-col); */
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
.AiO {
font-family: 'Bahnschrift', 'Arial', 'Calibri', 'Times New Roman', Times, serif;
font-size: 2.5vw;
margin: 40px 0px;
color: orange;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
/* text-align: left; */
top: 100px;
margin: 277px 0px 0px 150px;
}
.breaker {
display: none;
}
/* #media only screen and (max-width:2600px) {
.heading::before {
box-sizing: border-box;
content: "";
height: 100vh;
background-color: var(--black-col);
background: url(../static/Pb_O_W.png) no-repeat center center/cover;
width: 100%;
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
}
} */
.smbot {
text-align: center;
display: inline;
color: var(--light-col);
}
/* MAIN HEADING ENDS */
/* LISTS SECTION */
div ul {
margin: 0px 25px;
}
ol li {
margin: 0px 40px;
}
ol {
border: 2px solid blue;
border-radius: 5px;
text-align: center;
margin: 4px 0px;
width: 100;
}
.text-cen {
text-align: center;
}
ol li {
margin-left: 40px;
}
/* LISTS SECTION ENDS */
/* FORMS STARTED */
input {
display: block;
}
option {
background-color: var(--black-col);
color: var(--light-col);
height: 50px;
font-size: 1.1rem;
border-radius: 5px;
}
select {
width: 85px;
background-color: var(--black-col);
color: var(--light-col);
height: 30px;
border: 2px solid var(--black-col);
border-radius: 6px;
}
.button {
height: 25px;
width: 25px;
border-radius: 100px;
}
.checkbox {
height: 25px;
width: 25px;
}
/* FORMS ENDED */
h4, h5 {
text-shadow: 2px 2px 2px var(--black-col);
text-align: center;
}
.container {
background-color: rgb(255, 255, 255);
}
.box {
background-color: green;
width: 250px;
height: 250px;
position: relative;
animation-name: harry1;
/* animation-name: harry2; */
animation-duration: 4s;
animation-iteration-count: 1;
/* z-index: -1; */
transition: all 1s ease-in-out;
}
.box:hover {
transform: rotate(3600000000deg);
}
#keyframes harry1 {
from {
width: 200px;
}
to {
width: 1400px;
}
}
#keyframes harry2 {
0% {
top: 0px;
left: 0px;
}
25% {
top: 250px;
left: 0px;
}
75% {
top: 250px;
left: 250px;
}
100% {
top: 0px;
left: 250px;
}
}
<!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>HTML</title>
<link rel="stylesheet" href="HTML.css">
<!-- <script src="../JS/index.js"></script> -->
</head>
<body class="">
<div class="grinav">
<nav class="flex row al-cen">
<img id="logo" src="../static/Pb_O_Wsm.png" alt="Img not found">
<ul class="flex row">
<li id="li1"><a id="a1" href="../HTML/HTML.html" target="_blank">Html</a></li>
<li id="li2"><a id="a2" href="../HTML/CSS.html" target="_blank">CSS</a></li>
<li id="li3"><a id="a3" href="../HTML/Javasc.html" target="_blank">JavaScript</a></li>
</ul>
</nav>
<li id="timeclock" class="flex row al-cen "><span id="times"></span></li>
</div>
<div class="glowbar">
</div>
<div class="heading flex flex-column ju-cen ">
<h1 class="AiO ">All in ONE Website<br>
</h1>
<p class="ap">This <strong>Website</strong> aims to <br class="breaker">
<i>include</i> all that<br class="breaker">
has been <em>learnt</em> and<br class="breaker">
keep a record of it <br class="breaker">
for future usage.
</p>
</div>
<hr>
<div class="border-red firstpara">
<p><b>
<\b>This Bold<\b>
</b>Lorem ipsum dolor sit amet consectetur, adipisicing elit. <br><strong>
<\br> Has been used here and here<\br><br>
</strong> modi molestias omnis voluptate alias unde voluptates provident hic voluptatibus ipsum deleniti
itaque
delectus et expedita quisquam, non soluta, harum consequuntur sapiente rem quaerat. Repellendus, impedit.
</p>
</div>
<div class="border-green lists">
<div class="orderdlist block border flex-row ">
<ol id="ol1" class="inline-block" type="1">
<h6 class="cen">OL type 1</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olA" class="inline-block" type="A">
<h6 class="cen">OL type A</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="ola" class="inline-block" type="a">
<h6 class="cen">OL type a</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="olI" class="inline-block" type="I">
<h6 class="cen">OL type I</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
<ol id="oli" class="inline-block" type="i">
<h6 class="cen">OL type i</h6>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ol>
</div>
<div class="unorderedlist">
<ul type="square">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="circle">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<ul type="disc">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
</div>
</div>
<div class="border-blue table text-cen flex flex-column wrap">
<h4>This is a Table</h4>
<table>
<thead>
<tr>
<th>Heading-1</th>
<th>Heading-2</th>
<th>Heading-3</th>
<th>Heading-4</th>
<th>Heading-5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row-1-Colum-1</td>
<td>Row-1-Colum-2</td>
<td>Row-1-Colum-3</td>
<td>Row-1-Colum-4</td>
<td>Row-1-Colum-5</td>
</tr>
<tr>
<td>Row-2-Column-1</td>
<td>Row-2-Column-2</td>
<td>Row-2-Column-3</td>
<td>Row-2-Column-4</td>
<td>Row-2-Column-5</td>
</tr>
<tr>
<td>Row-3-Column-1</td>
<td>Row-3-Column-2</td>
<td>Row-3-Column-3</td>
<td>Row-3-Column-4</td>
<td>Row-3-Column-5</td>
</tr>
</tbody>
</table>
</div>
<div class="border-red forms flex flex-column">
<h1 class="cen">FORMS</h1>
<h5 class="cen">Below are some types of input we can ask on forms.Include a NAME in input tags
</h5>
<p>We will make input tag a block element to make go to next line and make the code look clean.
Before it was inline so elements crammmed over each other.We can add value="" to show that thing.<br>
The diff between value and placeholder is that the placeholder gets removed whan an item is entered, wheras
when we enter an item at place of value, it concencates in the value. Placeholder is Background, value is
not.
#gmail.com is value below in email. Remaining are Placeholder
</p>
<form action="#">
Button <input class="button" type="button" placeholder="Placeholder">
Checkbox<input type="checkbox" class="checkbox" placeholder="Placeholder">
Color<input type="color" placeholder="Placeholder">
Date<input type="date" placeholder="Placeholder">
Datetime<input type="datetime" placeholder="Placeholder">
Datetime-local<input type="datetime-local" placeholder="Placeholder">
<p>Just Testing</p>
Email<input type="email" value="#gmail.com" placeholder="Placeholder">
File<input type="file" placeholder="Placeholder">
Hidden<input type="hidden" placeholder="Placeholder">
Image<input type="image" placeholder="Placeholder">
Month<input type="month" placeholder="Placeholder">
Number<input type="number" placeholder="Placeholder">
Password<input type="password" placeholder="Placeholder">
Radio<input type="radio" placeholder="Placeholder">
Range<input type="range" placeholder="Placeholder">
Reset<input type="reset" placeholder="Placeholder">
Search<input type="search" placeholder="Placeholder">
Submit<input type="submit" placeholder="Placeholder">
Tel<input type="tel" placeholder="Placeholder">
Text<input type="text" placeholder="Placeholder">
Time<input type="time" placeholder="Placeholder">
Url<input type="url" placeholder="Placeholder">
Week<input type="week" placeholder="Placeholder">
Select from a dropdown <select>
<option value="Option-1-Val">Option-1</option>
<option value="Option-2-Val">Option-2</option>
<option value="Option-3-Val">Option-3</option>
<option value="Option-4-Val">Option-4</option>
<option value="Option-5-Val">Option-5</option>
</select>
</form>
</div>
<div class="entities border-green">
<h4 class="cen">We use entities for displaying some character</h4>
<
<!-- Less Than -->
>
<!-- Greater Than -->
£
<!-- pound -->
©
<!-- copy -->
⇛
<!-- Arrow -->
½
<!-- In form of fraction -->
</div>
<div class="border-blue semanticelements">
<p>A dropdown button which shows whatever is written in summary and when clicked reveals what is written in
detail tag.</p>
<details>
<summary>I have keys but no doors. I have space but no room. You can enter but you can't leave. What am i?
</summary>
A Keyboard.
</details>
<p>Now i will use a time tag</p>
<p>We will be celebrating new year on <time datetime="2022-12-12">December 12</time> in my house.</p>
</div>
</body>
<script>
function updateTime() {
timern = new Date()
times.innerHTML = `${timern.getHours()}:${timern.getMinutes()}:${timern.getSeconds()}`;
console.log(times.innerHTML)
}
setInterval(updateTime, 500);
</script>
</html>
I learned this all from the link provided by #Kennard but it was difficult.
I'll try to explain it here in a beginner friendly way to assist other newbies like me coming to this post.
const fs = require('fs')
const express = require('express');
const app = express();
const port = 80;
const home_html = fs.readFileSync('HTML.html')
app.get("/", (req, res) => {
res.writeHead(200, { 'Content-Type': 'text/html' });
res.end(home_html);
});
app.listen(port, () => {
console.log(`The application started successfully on port ${port}`);
});
The JavaScript is perfectly fine by itself... except with a small problem, which scaled up ofc. The express could not found the stylesheet(CSS file) I linked in Html. It does not follows the link we gave in html. Rather it says
You want to serve a file along with HTML... Fine I'll do it.
But to avoid the mess, you have to do some thing more. Tell me the location where File is stored.
And this is the public thing mentined above
For the sake of simplicity I would recommend beginners to follow this guide to create a structure which is organized.
.
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.pug
├── index.pug
└── layout.pug
This is the structure we get by executing following commands:
npx express-generator
express --view=pug myapp (myapp is name of folder you wanna generate.)
Remember the "app.js" stores all of this Javascript.
Now we will tell express to look in following directory;
app.use('/public', express.static(path.join(__dirname, 'public')))
It simply means that in the directory I am standing right now, there is a folder named public. Go there and fetch files from there.
Now keep all the files e.g images to serve CSS and Html over here.
If you generate files using the method on this link, it has already got folders seperated for this.
Remember The answer to all question lies in Documentation... Once and for all
Upvote if Helpful.
//Thankyou Kennard. Would not have been possible without your help.
Express static serve the css
const path = require('path')
app.use(express.static(path.join(__dirname, 'path_to_public_directory')))
//Put all your static files in a public folder and then you do this
app.use('/public', express.static(path.join(__dirname, 'public')))
I'm creating a web page with a fixed header and sticky sub-navigation with a smooth scroll on it. My problem is when clicking the sub-nav first link towards its target element, the sticky sub-navigation not showing up. Does anyone knows how to fix this?
Here are the images. To clarify my question.
Here is my code.
https://codepen.io/christine-tine27/full/eYzMgjB
// SMOOTH SCROLL
var $ = jQuery.noConflict();
$(function () {
$(".smoothScroll").click(function () {
if (
location.pathname.replace(/^\//, "") ==
this.pathname.replace(/^\//, "") &&
location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $("[name=" + this.hash.slice(1) + "]");
if (target.length) {
$("html,body").animate(
{
scrollTop: target.offset().top - 200
},
1100
);
return false;
}
}
});
});
// STICKY SUB NAV
$(window).scroll(function(){
var height = $('.content-item.odd').outerHeight();
if($(window).width() < "767"){
if ($(window).scrollTop() >= 200) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() < "1024") {
if ($(window).scrollTop() >= 550) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else if($(window).width() > "2000") {
if ($(window).scrollTop() >= 1000) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}else{
if ($(window).scrollTop() >= 700) {
$('.content-item.odd').addClass('fixed-header');
$('.content-item.odd').css({"position":"fixed","width":"100%","top":"90px","border-top":"1px solid #fff"});
}
else {
$('.content-item.odd').removeClass('fixed-header');
$('.content-item.odd').removeAttr("style");
}
}
});
body {
margin: 0;
padding: 0;
}
body > header {
font-family: 'Gill Sans', 'Gill Sans MT', sans-serif;
position: fixed;
*position: absolute;
top: 0;
left: 0;
padding: 0;
color: #FFF;
background-color: #000;
*background-color: rgba(0,0,0,0.75);
width: 100%;
z-index: 20;
}
body > header .wrapper {
padding: 0px 10px;
}
body > header section {
display: block;
position: absolute;
top: 15px;
*left: 50px;
}
body > header nav {
display: block;
font-size: 11px;
font-weight: bold;
line-height: 50px;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #000;
}
body > header nav ul li {
display: inline-block;
padding: 0 20px;
transition: padding 0.2s ease;
}
body > header nav ul li a {
display: inline-block;
position: relative;
transition: color 0.3s ease;
padding-top: 40px;
}
body > header a {
color: #FFF;
}
ol, ul {
list-style: none;
margin: 0;
padding: 0;
}
.bgImg {
margin-top: 90px;
}
.bgImg img {
width: 100%;
height: 70vh;
object-fit: cover;
}
.wrapper {
max-width: 1300px;
margin: 0 auto;
padding: 30px 20px 0px 20px;
}
.group {
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
.group .half {
width: calc(100% / 4);
outline: none;
text-align: center !important;
}
.half .img img {
width: 100%;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
.prsub .group .half {
width: calc(100% / 3);
}
.half .img {
padding: 0px 2px 0px 2px;
}
.the-content {
padding: 20px 0;
}
h4.entry-title {
position: absolute;
margin: 0;
color: #fff;
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
padding: 0;
top: 10px;
letter-spacing: 1px;
text-align: center;
}
.menu {
text-align: right;
}
.menu li {
display: inline-block;
}
.menu li a {
color: #fff;
border-right: 1px solid #fff;
padding: 6px 10px;
}
.content-item.odd {
background: #000;
z-index: 3;
}
.menu {
text-align: right;
}
.content-item.odd .wrapper {
padding-bottom: 0px !important;
}
main {
background-color: #fff;
padding: 0 0 0px 0;
margin-top: -4px;
overflow: hidden;
position: relative;
z-index: 15;
}
.content-item.odd .wrapper {
padding: 0px !important;
}
.prsub .content-wrap {
max-width: 1300px;
margin: 0 auto;
border-top: 1px solid #c9ced1;
padding-top: 0px;
}
main article h2 {
font-family: 'Abril Fatface';
font-size: 30px;
text-transform: uppercase;
color: #000;
font-weight: bold;
margin: 0;
text-align: center;
line-height: 1;
margin-bottom: 20px;
}
main article ul, main article ol {
color: #404041;
display: block;
font-size: 24px;
font-weight: normal;
list-style-type: disc;
}
main article section ul {
font-size: 18px;
}
main article ul li, p {
font-size: 18px;
margin: 10px 0 0;
list-style: none;
text-align: center;
color: #000;
}
.prsub h3 {
text-transform: uppercase;
text-align: center;
font-weight: 100;
font-family: 'Abril Fatface';
color: #000;
padding: 0px;
font-size: 20px;
margin: 0;
font-weight: 100;
}
.prsub article {
padding: 40px 0;
}
<header>
<div class="wrapper">
<section>
<a href="/" class="logo">
<h1>Lorem</h1>
</a>
</section>
<nav>
<div class="navx"></div>
<ul class="ci-plugin">
<li><span>Home</span></li>
<li><span>Menu</span></li>
<li><span>About </span></li>
<li><span>Cook</span></li>
<li><span>Contact </span></li>
<li><span>Careers </span></li>
</ul>
</nav>
</div>
</header>
<section class="title">
<div class="bgImg">
<img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/header-background.jpg" alt="">
</div>
</section>
<main id="main" class="prsub">
<div class="content-container scroll">
<div class="content">
<div class="content-item odd">
<div class="wrapper">
<div class="the-content">
<h4 class="entry-title"><span> About Us</span></h4>
<div class="menu">
<ul >
<li><a class="smoothScroll" href="#intro">INTRO</a></li>
<li><a class="smoothScroll" href="#services">SERVICES</a></li>
<li><a class="smoothScroll" href="#projects">PROJECTS</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="con-container">
<div class="content-wrap">
<article>
<section>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="intro">
<h2>
INTRO
</h2>
<ul>
<li>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</li>
</ul>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="services">
<h2>
SERVICES
</h2>
<h3>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</section>
</article>
</div>
<div class="content-wrap">
<article>
<section id="projects">
<h2>
PROJECTS
</h2>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</section>
</article>
</div>
</div>
<div class="wrapper">
<div class="group">
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
<div class="half">
<div class="img"><img src="https://www.free-css.com/assets/files/free-css-templates/preview/page259/aria/assets/images/intro-office.jpg"></div>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
Thank you in advance.
How do I make a div stay fixed only with horizontal scroll but not vertical?
As you can see, when I scroll from left to right the top nav bar is fixed like it should.
Though as I scroll down, the top nav bar also follows, not as intended. It should remain at the top when the user scrolls down.
This is my CSS to achieve this, simply using position: fixed; and width: 100%;
/* Nav */
.nav {
height: 60px;
position: fixed;
top: 0;
width: 100%;
}
I don't know whether I need to use JavaScript to achieve this.
Thank you
Further code as requested,
<!-- Nav -->
<div class="nav">
<!-- Logo -->
<img class="logo" src="images/logo.png" alt="">
<!-- Logout button -->
<button class="logout-btn" id="logout_user">Logout</button>
<!-- User's email -->
<span id="users_email"></span>
</div>
/* Logo */
.logo {
max-width: 100%;
max-height: 100%;
margin-left: 50px;
}
/* Logout Button */
.logout-btn {
float: right;
position: relative;
top: 40%;
margin-right: 30px;
border: none;
color: white;
padding: 5px 7px 5px 7px;
text-align: center;
text-decoration: none;
font-size: 100%;
border-radius: 10px;
background-color: lightcoral;
}
/* User's email */
#users_email {
float: right;
position: relative;
top: 45%;
margin-right: 15px;
font-size: 100%;
}
Donald Ducks solutions (both) results in the following. Although the nav bar doesn't follow when vertically scrolling it doesn't stretch across the screen and has a scroll bar inside it.
body{
margin:0px;
padding:10%;
background:#000;
}
.wrapper{
margin:0px auto;
width:50%;
background:#ccc;
border:2px solid #fff;
}
.box{
width:100%;
height:250px;
overflow-x: auto;
overflow-y: none;
}
.box p{
font-size:15px;
fon-weight:normal;
color:#333;
padding:2%;
line-height:25px;
}
<div class="wrapper">
<div class="box">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
body{
margin:0px;
padding:5%;
background:#000;
}
.wrapper{
margin:0px auto;
width:60%;
background:#ccc;
border:2px solid #fff;
}
.block{
width:100%;
height:30px;
overflow-x: auto;
overflow-y: none;
}
.box{
font-size:15px;
fon-weight:normal;
color:#333;
padding:0px 10px;
width:12%;
float:left;
line-height:25px;
}
<div class="wrapper">
<div class="block">
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div><div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
<div class="box">Testing</div>
</div>
</div>
You don't need to use javascript for this. You will only need css.
What you can use is this:
.nav {
height: 60px;
padding: 4px;
margin: 4px 4px;
overflow: auto;
white-space: nowrap;
width: 100%;
}
This css code should work.
If it doesn't, remove overflow and try this instead:
.nav{
height: 60px;
padding: 4px;
margin: 4px 4px;
overflow-x: auto;
overflow-y: none;
white-space: nowrap;
width: 100%;
}
This should be enough.
Don't really know why this is happening my title "Roberto Salas" it's not staying in place when I change the window size, also doesn't stay in place when I open it on my cellphone
title not in right position
Title not in right position when the hmb button drops
I would like that the title stay in the top left heres my code
<!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>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name">Roberto Salas</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('#Title').addClass('name2');
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
you can also check the website at https://gonzaloalcala.github.io/ProyectoR/index.html
You may add top: 0 on class .name. Then, set color: white in the media query.
.name{
line-height: 60px;
position: fixed;
top: 0; /* Add top to align */
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
#media(max-width: 786px) {
/* Change the color to white */
.name {
color: white;
}
}
Put the div with name:
<div id="Title" class="name">
Roberto Salas
</div>
above the <div class="menu-icon> in code.
Remember to change color of name on breakpoint as it is black as the navbar.
like:
#media(max-width: 786px) {
.name {
color: pink;
}
}
https://jsfiddle.net/e98fxyzg/3/
add to your css nav{display:flex; flex-direction:column;}
`
nav{display:flex;
flex-direction:column;}
Here is my style sheet
html, body {
margin: 0;
padding: 0;
width: 100%;
}
.Monse{
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(img/bosqueaves.jpg) no-repeat center;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.name{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: black;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.name2{
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: white;
font-size: 20px;
letter-spacing: 2px;
font-family: 'Montserrat', sans-serif;
}
.smenu{
text-decoration: none;
font-size: 16px;
color: white;
}
.submenu2{
text-decoration: none;
font-size: 16px;
color: black;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
text-decoration: none;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: white;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
text-decoration: none;
}
nav.black ul {
background: #000;
text-decoration: none;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
text-decoration: none;
}
.menu-icon {
display: block;
}
}
<!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>Roberto Salas</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div id="Title" class="name color">
Roberto Salas
</div>
<div class="Monse">
<ul >
<li><a href="#" class="submenu2" >Home</a></li>
<li><a href="#" class="submenu2" >About</a></li>
<li><a href="#" class="submenu2" >Blog</a></li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
$('a').css('color','white');
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
$('#Title').addClass('name2');
$('a').css('color','white');
}
else {
$('nav').removeClass('black');
$('#Title').removeClass('name2');
$('a').css('color','black');
}
})
</script>
</body>
</html>
I implemented a slider on one of my sites but there is a lot of unwanted space above my slider. As you can see the space between the bike image and the menu bar, I was wondering if there was any way to remove this so that the bike image is below the menu bar. I tried looking if it was the height set for the slider but I don't think it is.
HTML:
<!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>Croydon Cycles</title>
<link rel="stylesheet" href="shop-style.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="parallax.min.js"></script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<div class="wrapper">
<header>
<nav>
<div class="menu-icon">
<i class="fa fa-bars fa-2x"></i>
</div>
<div class="logo">
LOGO
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Shop</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>
<div class="slideshow-container">
<div class="myslides fade">
<div class="numbers">1 / 4</div>
<div class="slider-1"><img class="Fit" src="images/slider-1.jpg"></div>
<div class="caption">Text 1</div>
</div>
<div class="myslides fade">
<div class="numbers">2 / 4</div>
<div class="slider-2"><img src="images/2.jpg"></div>
<div class="caption">Text 2</div>
</div>
<div class="myslides fade">
<div class="numbers">3 / 4</div>
<div><img src="images/3.jpg"></div>
<div class="caption">Text 3</div>
</div>
<div class="myslides fade">
<div class="numbers">4 / 4</div>
<div><img src="images/4.jpg"></div>
<div class="caption">Text 4</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dots" onclick="currentSlide(1)"></span>
<span class="dots" onclick="currentSlide(2)"></span>
<span class="dots" onclick="currentSlide(3)"></span>
<span class="dots" onclick="currentSlide(4)"></span>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlide(slideIndex);
function plusSlides(n){
showSlide(slideIndex += n);
}
function currentSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n){
var i;
var slides = document.getElementsByClassName("myslides");
var dots = document.getElementsByClassName("dots");
if (n > slides.length) { slideIndex = 1};
if (n < 1) { slideIndex = slides.length};
for (i=0;i<slides.length;i++) {
slides[i].style.display = "none";
};
for (i=0;i<dots.length;i++) {
dots[i].className = dots[i].className.replace(" active","");
};
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<div class="content">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<script type="text/javascript">
// Menu-toggle button
$(document).ready(function() {
$(".menu-icon").on("click", function() {
$("nav ul").toggleClass("showing");
});
});
// Scrolling Effect
$(window).on("scroll", function() {
if($(window).scrollTop()) {
$('nav').addClass('black');
}
else {
$('nav').removeClass('black');
}
})
</script>
</body>
</html>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
font-family: verdana,sans-serif;
margin: 0;
}
body {
font-family: "Helvetica Neue",sans-serif;
font-weight: lighter;
}
header {
width: 100%;
height: 100vh;
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
.content {
width: 94%;
margin: 4em auto;
font-size: 20px;
line-height: 30px;
text-align: justify;
}
.logo {
line-height: 60px;
position: fixed;
float: left;
margin: 16px 46px;
color: #fff;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
}
nav {
position: fixed;
width: 100%;
line-height: 60px;
z-index:2;
}
nav ul {
line-height: 60px;
list-style: none;
background: rgba(0, 0, 0, 0);
overflow: hidden;
color: #fff;
padding: 0;
text-align: right;
margin: 0;
padding-right: 40px;
transition: 1s;
}
nav.black ul {
background: #000;
}
nav ul li {
display: inline-block;
padding: 16px 40px;;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 16px;
}
.menu-icon {
line-height: 60px;
width: 100%;
background: #000;
text-align: right;
box-sizing: border-box;
padding: 15px 24px;
cursor: pointer;
color: #fff;
display: none;
}
#media(max-width: 786px) {
.logo {
position: fixed;
top: 0;
margin-top: 16px;
}
nav ul {
max-height: 0px;
background: #000;
}
nav.black ul {
background: #000;
}
.showing {
max-height: 34em;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 24px;
text-align: center;
}
.menu-icon {
display: block;
}
}
body{
font-family: verdana,sans-serif;
margin: 0;
}
.slideshow-container{
width: 800px;
position: relative;
margin: auto;
}
.numbers{
position: absolute;
top: 0;
color: #f2f2f2;
padding: 8px 12px;
font-size: 12px;
}
.myslides{
display: none;
}
.prev , .next{
position: absolute;
top: 50%;
font-size: 18px;
font-weight: bold;
padding: 16px;
margin-top: -22px;
border-radius: 0 3px 3px 0;
color: #fff;
cursor: pointer;
}
.next{
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,.next:hover{
background-color: rgba(0,0,0,0.8);
}
.caption{
text-align: center;
position: absolute;
bottom: 8px;
width: 100%;
color: #f2f2f2;
font-size: 15px;
padding: 8px 22px;
}
.dots{
width: 13px;
height: 13px;
background: gray;
display: inline-block;
border-radius: 50%;
cursor: pointer;
}
.fade{
animation-name:fade;
animation-duration:1.5s;
}
#keyframes fade{
from {opacity: 0.4;}
to {opacity: 1;}
}
.active, .dot:hover {
background-color: #333;
}
.slider-1 {
display: grid;
height: 100%;
z-index:0;
}
.Fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
z-index:0;
}
The problem is, that on you're CSS the header has a height of 100vh...
Just reduce or remove the amount.
header {
width: 100%;
/* height: 100vh; */
background: url(hero.jpg) no-repeat 50% 50%;
background-size: cover;
}
See here: jsfidde