I want my sidemenu to be fixed. But whenever I do it the content page crashes.
It's this class menu_left . When I remove position: fixed then all works fine. But i want it to be fixed. I just want the menu to stay in position so I can scroll down my content only.
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
#app {
display: flex;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
overflow: scroll;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I undesrtand you meant to say the content "collapses" to the left (not crashes).
You could use a pusher placeholder element like so:
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
nav {
padding: 10px 40px;
background: white;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
position: fixed;
width: 100%;
box-sizing: border-box;
}
#app {
display: flex;
padding-top: 47px;
}
.topbar-user {
display: flex;
}
.menu_left {
background: #333c4e;
width: 200px;
height: 100vh;
position: fixed;
}
.menu_left-pusher {
flex: 0 0 200px;
}
.menu_left-icon {
padding: 20px;
}
.menu_left-item {
display: flex;
align-items: center;
color: white;
text-decoration: none;
}
.menu_left-item:hover {
background: #293141;
transition: 0.5s;
}
.topbar-items {
display: flex;
align-items: center;
justify-content: space-between;
}
.main__content {
width: 100%;
}
.main__content-container {
padding: 34px 34px;
}
.imgs {
width: 34px;
padding: 20px;
}
.white-card {
background-color: #fff;
width: 100%;
display: flex;
margin-top: 34px;
height: auto;
align-items: center;
box-shadow: 0 0.1875rem 0.375rem 0 rgba(0,0,0,.13);
}
.card1 {
flex: 1;
}
.card2 {
padding: 20px;
}
#media (max-width: 600px) {
.menu_left {
display: none;
}
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
</head>
<body>
<nav>
<div class="topbar-items">
<H1>Logo</H1>
<div class="topbar-user">
<i class="fas fa-bell"></i>
<p>Jan Kowalski</p>
<i class="fas fa-angle-down"></i>
</div>
</div>
</nav>
<div id="app">
<div class="menu_left-pusher">...</div>
<div class="menu_left">
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
<a href="" class="menu_left-item">
<div class="menu_left-icon"><i class="fas fa-home"></i></div>
<div class="menu_left-text"> Item</div>
</a>
</div>
<div class="main__content">
<div class="main__content-container">
<h2>Main Page</h2>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
<div class="white-card">
<div class="card-title">
<img src="https://www.clipartmax.com/png/middle/2-29162_notification-free-internet-website-icon-vector-linkedin-circle-logo-png.png" class="imgs">
</div>
<div class="card1">
<h4>User</h4>
<p>message</p>
</div>
<div class="card2">
<p>19.02.2020</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
index.html - below is the index.html file code where I have written all the html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="./img-1.jpg" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-2.jpg" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="./img-3.jpg" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>
style.css - below is the style.css file code here I have written all my CSS code
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 1rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
I want to place the play icon in the center of all the three images with CSS but I am getting the play icon only for the center image. How to get the play icon in the center of all three images.
I want to place the play font-awesome icon in the center of the image
Try this.
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color : #000;
color : #fff;
padding : 4rem 4rem;
}
nav {
display : flex;
flex-direction : column;
align-items: center;
border-bottom : 2px solid #fff;
margin : 0;
padding : 0;
}
.stream{
max-width : 1000px;
width : 100%;
}
.fa-play {
font-size : 3rem;
position:absolute;
text-align:center;
color:red;
bottom:30px;
}
ul {
list-style-type: none;
display : flex;
justify-content: space-around;
align-items: center;
margin : 0;
padding : 0;
}
li h1{
font-size : 3rem;
}
a{
color : black;
text-decoration: none;
padding : 1rem 2rem;
background-color : white;
}
.row {
display : flex;
}
.col {
padding : 1rem;
flex : 1;
justify-content:center;
}
.col img{
max-width : 100%;
}
.img-container {
position : relative;
display:flex;
justify-content:center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text {
display : flex;
flex-direction : column;
align-items: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Streaming</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav>
<div class="logo"><i class="fas fa-play" style="position:relative"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-1"></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-2"></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><i class="fas fa-play" ></i><img src="https://dictionary.cambridge.org/images/thumb/circle_noun_001_02738.jpg" alt="img-3"></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
</body>
</html>
You can use the flexbox property for your .centered and .img-container classes. Something as shown below:
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
Full Working Snippet: - (I've used random gifs as images just for this answer, you can replace them your images path)
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
background-color: #000;
color: #fff;
padding: 1rem 4rem;
}
nav {
display: flex;
flex-direction: column;
align-items: center;
border-bottom: 2px solid #fff;
margin: 0;
padding: 0;
}
.stream {
max-width: 1000px;
width: 100%;
}
.fa-play {
font-size: 3rem;
}
ul {
list-style-type: none;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0;
}
li h1 {
font-size: 3rem;
}
a {
color: black;
text-decoration: none;
padding: 1rem 2rem;
background-color: white;
}
.row {
display: flex;
}
.col {
position: relative;
padding: 1rem;
flex: 1;
}
.col img {
max-width: 100%;
}
img {
width: 200px;
height: 200px;
}
.img-container {
display: flex;
justify-content: center;
align-items: center;
}
.centered {
position: absolute;
top: 30%;
left: 50%;
z-index: 1111;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
.text {
display: flex;
flex-direction: column;
align-items: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet"/>
<nav>
<div class="logo"><i class="fas fa-play"></i></div>
<div class="stream">
<ul>
<li>View All</li>
<li>
<h1>Net Steam</h1>
</li>
<li>Subscribe</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-1"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Mantrix</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-2"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>2 Fast 2 Soon</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
<div class="col">
<div class="img-container"><img src="https://c.tenor.com/Lvhj4QVL8-4AAAAM/server-is-for-javascript.gif" alt="img-3"></div>
<div class="centered"><i class="fas fa-play"></i></div>
<div class="text">
<h1>Take Outback</h1>
<p>Take the Yellow Pill to get into the zone</p>
Watch Now
</div>
</div>
</div>
</div>
Hope that's how you wanted it to look
After quite a bit of googling and searching around on here I haven't been able to find a solution to my problem. I am not able to display the trashcan icons the way I need them to be displayed. The paragraphs in the html body are inserted dynamically and can have varying heights so I want to display and align the trash can icons to the top of each of the adjacent paragraphs. How can I do this using css/html? See below for current behavior.
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
If you need to save the current html structure, then you can solve this problem using the css properties display: grid and display: contents. It's not the best solution, but it works. Example below:
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
/*
!!! below are the new CSS changes !!!
*/
div#output-container {
display: grid;
grid-auto-flow: column;
}
div.text {
display: contents;
}
div.text:nth-child(1) > * {
grid-column: 1;
}
div.text:nth-child(2) > * {
grid-column: 2;
}
div.text:nth-child(3) > * {
grid-column: 3;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="app.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container-bottom">
<!-- <i class="fas fa-trash-alt"></i> -->
<div id="output-container">
<!-- <h2>Original Text</h2> -->
<!-- <div id="original-highlighted-text" class="text">
<h2>Change Preview</h2>
<p id=highlightedp></p>
</div> -->
<div id="original-text" class="text lowercolumns">
<h2>Original Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<!-- <h2>Changed Text</h2> -->
<div id="outputted-text" class="text lowercolumns">
<h2>Changed Text</h2>
<p>asdfasdfadf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div id="delete-column" class="text lowercolumns">
<h2>Delete</h2>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span style="
width: 200px;
"><i class="fas fa-trash-alt"></i></span></div>
</div>
<div class="container-delete">
<div class="icon-div text"><span><i class="fas fa-trash-alt"></i></span></div>
</div>
</div>
</div>
</div>
<script src="app.js" async="" defer=""></script>
<script src="mark.min.js"></script>
</body>
</html>
Nevertheless, I still recommend reviewing your html structure, for tabular (display: table) or grid-based (display: grid),
You may have a strong reason for the HTML structure you are employing. However, I think that it is difficult to achieve the desired result using that structure. A simple solution would be to adjust your structure and make it easy to align items.
.container{
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
}
.header{
display: flex;
gap: 10px;
}
label {
font-size: larger;
}
div#output-container {
float: left;
display: block;
width: 90%;
}
div#output-container h2 {
text-align: center;
}
div.text {
float: left;
width: 40%;
margin: 1%;
}
div.text p {
word-break: break-all;
}
form {
float: left;
width: 50%;
}
mark {
background: #FF5733;
color: black;
}
h1.columns {
float: left;
width: 48%;
margin: 1%;
}
.container-top {
display: block;
width: 100%;
}
.container-bottom {
border-top: .25rem solid;
display: inline-block;
width: 90%;
}
.column {
float: left;
width: 45%;
margin: 0%;
}
#input-text {
background: #f7f7f7;
width: 100%;
height: 350px;
}
div#original-highlighted-text {
margin-top: 1.5%;
}
.lowercolumns p {
border-right: 3px dashed;
border-bottom: 3px solid;
}
#text-form {
margin-bottom: 10px;
}
i {
align-items: center;
padding: 5px;
font-size: 20px;
}
div.icon-div.text {
width: 100px;
margin: 1%;
}
div.icon-div span {
width: 100px;
margin: 1%;
}
#delete-column {
width: 10%;
}
#delete-column h2 {
margin-bottom: 10px;
}
.container-delete {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdfadf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
<div class="container">
<div class="originalText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="changedText text lowercolumns">
<p>asdfasdf<br>asdfasdf<br>asdfasdf</p>
</div>
<div class="delete">
<p><i class="fas fa-trash-alt"></i></p>
</div>
</div>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
My websites sidebar doesn't work on mobile. If you wanna see what i mean, go to Zinexium. I don't know what to do, im new to html. The code.
Thank you!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
:root {
--sidebar-width: 4.5em;
}
.sidebar {
background-color: #333;
position: fixed;
transition: width 0.2s ease;
}
.sidebar nav {
height: 100%;
}
.sidebar .sidebar__nav {
display: flex;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar .sidebar__nav .sidebar__nav__link {
align-items: center;
color: #bbb;
display: flex;
padding-left: 20px;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease;
}
.sidebar .sidebar__nav .sidebar__nav__link:hover {
background-color: rgba(0, 0, 0, 0.15);
color: #80f;
}
.sidebar .sidebar__nav .sidebar__nav__text {
display: none;
margin-left: 10px;
margin-right: auto;
white-space: nowrap;
}
.sidebar .sidebar__nav i {
align-items: center;
display: flex;
justify-content: center;
}
#media (max-width: 572px) {
.sidebar {
bottom: 0;
width: 100%;
}
.sidebar .sidebar__nav {
justify-content: center;
}
.sidebar .sidebar__nav .sidebar__nav__link {
height: 100%;
padding: 0.75em;
}
.sidebar .sidebar__nav i {
font-size: 2rem;
}
}
#media (min-width: 572px) {
.sidebar {
height: 100vh;
left: 0;
width: var(--sidebar-width);
}
.sidebar:hover {
width: 14rem;
}
.sidebar .sidebar__nav {
flex-direction: column;
}
.sidebar .sidebar__nav .sidebar__nav__link {
padding: 1em;
}
.sidebar:hover .sidebar__nav .sidebar__nav__text {
display: inline;
}
.sidebar .sidebar__nav i {
font-size: 2.5rem;
}
}
#media (max-height: 434px) {
.sidebar {
overflow-y: scroll;
}
}
:root {
--sidebar-width: 4.5em;
}
body {
margin: 0;
padding: 0;
font-family: 'Roboto';
}
* {
outline: none;
box-sizing: border-box;
}
.main {
margin-left: auto;
margin-right: auto;
max-width: 992px;
padding: 2em 1.5em;
}
.main h2 {
font-size: 2em;
margin-top: 0px;
}
.main p {
color: #444;
font-size: 1.25em;
line-height: 2;
text-align: justify;
}
#media (min-width: 572px) {
.main {
margin-left: var(--sidebar-width);
}
}
#media (min-width: 992px) {
.main {
padding: 2.5em;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
p {
font-size: 34px;
}
.wrapper {
position: relative;
/* height: 200px; */
width: 80%;
margin: auto;
overflow: auto;
}
.main {
margin: auto;
}
.column {
float: left;
width: 33.3%;
margin: 4em;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.card p {
font-size: 150%; /* changes font size inside of cards*/
}
.about-section {
padding: 50px;
text-align: center;
background-color: #474e5d;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: '';
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
#media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
}
.rainbow {
text-align: center;
text-decoration: underline;
font-size: 32px;
font-family: monospace;
letter-spacing: 5px;
}
.rainbow_text_animated {
background: linear-gradient(
to right,
#6666ff,
#0099ff,
#00ff00,
#ff3399,
#6666ff
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: rainbow_animation 6s ease-in-out infinite;
background-size: 400% 100%;
}
#keyframes rainbow_animation {
0%,
100% {
background-position: 0 0;
}
50% {
background-position: 100% 0;
}
}
#rcorners1 {
border-radius: 25px;
background: #d3d3d3;
padding: 20px;
width: 300px;
height: 345px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="sidebar.css" type="text/css" />
<link rel="stylesheet" href="sidebarStyle.css" type="text/css" />
<meta name="description" content="Developers of Zinexium." />
<title>Zinexium</title>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<aside class="sidebar">
<nav>
<ul class="sidebar__nav">
<li>
<a href="index.html" class="sidebar__nav__link">
<i class="mdi mdi-home"></i>
<span class="sidebar__nav__text">Home</span>
</a>
</li>
<li>
<a href="developers.html" class="sidebar__nav__link">
<i class="mdi mdi-account-multiple"></i>
<span class="sidebar__nav__text">Developers</span>
</a>
</li>
<li>
<a href="download.html" class="sidebar__nav__link">
<i class="mdi mdi-download"></i>
<span class="sidebar__nav__text">Download</span>
</a>
</li>
<li>
<a href="contact.html" class="sidebar__nav__link">
<i class="mdi mdi-phone"></i>
<span class="sidebar__nav__text">Contact</span>
</a>
</li>
<li>
<a href="about.html" class="sidebar__nav__link">
<i class="mdi mdi-tooltip-text"></i>
<span class="sidebar__nav__text">About</span>
</a>
</li>
<li>
<a href="logs.html" class="sidebar__nav__link">
<i class="mdi mdi-message-alert"></i>
<span class="sidebar__nav__text">Logs</span>
</a>
</li>
<li>
<a href="https://discord.gg/QTkncurCkm" target="_blank" class="sidebar__nav__link">
<i class="mdi mdi-discord"></i>
<span class="sidebar__nav__text">Discord</span>
</a>
</li>
</ul>
</nav>
</aside>
<div class="about-section">
<h1>Developers</h1>
</div>
<div class="wrapper">
<div class="main">
<h2 style="text-align: center">Our Team</h2>
<div class="row">
<div class="column">
<div class="card">
<img src="Morgan.jpeg" alt="Morgan" style="width: 100%" />
<div class="container">
<h2>MorganInnit</h2>
<p class="title">Founder & Main Dev</p>
<p>i wanna die.</p>
<p>
morgan#0887<br />
UserID:780879021935689799
</p>
<p>
<a href="http://dsc.bio/morganoutit" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="thonk.jpeg" alt="ThonkPT" style="width: 100%" />
<div class="container">
<h2>ThonkPT</h2>
<p class="title">Co Dev</p>
<p>kewl gamer.</p>
<p>
ThonkPT#3766<br />
UserID:710220284531310734
</p>
<p>
<a href="http://dsc.bio/thonkpt2" target="_blank"
><button class="button">Contact</button></a
>
</p>
</div>
</div>
</div>
</div>
<!--end of row-->
</div>
<!--end of main-->
</div>
<!--end of wrapper-->
</body>
</html>
The snippet isn't the exact website, only the developers page. If you wanna see the actual page, go to "The code" i linked.
Thanks.
P.S. The snippet is missing some things, so go to the actual developers page if you wanna see it ig.
If by "doesn't work" you meant "is hiding under the content" ...the solution is to give it the z-index: 1 in your CSS:
.sidebar {
z-index: 1;
}
it will do the job.
With out bootstrap the nav bar works perfectly fine, but when I activate bootstrap the nav bar gets buggy.
Here is how it should look:
Here is how it looks with bootstrap:
I think there is something that needs an !important added to it, but I'm not sure what so please can someone with experience tell me which one?
I tried inline-flex as well but still no hope
I tried !important with the width but still doesn't work
I tried height: 0%!important; and still nothing work
I need to use bootstrap to have the table with bootstrap design so removing bootstrap is no option.
ok so I'm not sure if there's another problem like this but can't seem to find an answer so here is my code:
html {
scroll-behavior: smooth;
}
#extra space {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: sticky;
top: 0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo {
color: whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 22px;
}
.nav-links {
display: flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li {
list-style: none;
}
.burger div {
width: 25px;
height: 5px;
background-color: whitesmoke;
margin: 3px;
}
.burger {
display: none;
cursor: pointer;
}
.nav-links a {
color: whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px) {
.nav-links {
display: inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav {
position: fixed;
top: 0;
}
.nav-links {
font-size: 1px;
position: fixed;
right: 0px;
height: 92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {}
.burger {
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active {
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color: black;
}
#section2 {
background-image: url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script>
<!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile">
<img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" />
</div>
<div class="col-3 col-12-mobile">
<img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" />
</div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
edit:
the answer is you need to do a bootstrap nav_bar
the good thing if you search in the answers bellow you find my accepted answer as a good navbar
The issue is with your structure as bootstrap have its own nav structure so you need to follow that.
I just change the nav with the bootstrap nav and added you links
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.navbar-nav {
justify-content: space-around;
width: 100%;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav{
position:sticky;
top:0;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
background-color: #0c0c0c;
overflow: auto;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="#"><div class="logo">
<h4>thomas<br> venutu</h4>
</div></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">NextEvent</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Music</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="index">Boooking</a>
</li>
</ul>
</div>
</nav>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
Try this
html{
scroll-behavior: smooth;
}
#extra space{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#section2 {
color: #fff;
text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25);
text-align: center;
padding: 5em 0 5em 0;
margin: 0;
background-size: 125% auto;
}
#section2 header {
margin: 0 0 2em 0;
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.header {
position:sticky;
top:0;
min-height: 12vh;
background-color: #0c0c0c;
}
.logo{
color:whitesmoke;
text-transform: uppercase;
letter-spacing: 5px;
font-size:22px;
}
.nav-links{
display:flex!important;
justify-content: space-around!important;
width: 100%!important;
}
.nav-links li{
list-style: none;
}
.burger div{
width: 25px;
height: 5px;
background-color:whitesmoke;
margin:3px;
}
.burger{
display:none;
cursor: pointer;
}
.nav-links a{
color:whitesmoke;
text-decoration: none;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 14px;
}
#media screen and (max-width:1024px){
.nav-links{
display:inline-flex;
justify-content: space-around;
width: 60%;
}
}
#media screen and (max-width:768px){
body{
overflow-x:hidden;
}
.nav{
position: fixed;
top: 0;
}
.nav-links{
font-size: 1px;
position:fixed;
right:0px;
height:92vh;
top: 0px;
background-color: #0c0c0c;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li{
}
.burger{
display: block;
position: absolute;
top: 8px;
right: 16px;
}
.nav-active{
transform: translateX(0%);
}
}
#section1 {
background-image: url("background6.png");
background-position: center center;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
background-color:black;
}
#section2 {
background-image:url("background image venuto4.jpg");
height: 980px;
width: 100%;
}
#section3 {
background-color: black;
height: 700px;
}
#section4 {
background-color: whitesmoke;
height: 700px;
}
#section5 {
background-color: yellow;
height: 700px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE HTML>
<!--
Overflow by HTML5 UP
html5up.net | #ajlkn
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
-->
<html>
<head>
<title>Overflow by HTML5 UP</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="navmain.css" />
<link rel="stylesheet" href="css/bootstap.css">
<script src="https://kit.fontawesome.com/703d63b52b.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="header d-flex align-items-center container-fluid">
<div class="row align-items-center flex-grow-1">
<div class="col-auto">
<div class="logo">
<h4>thomas<br> venutu</h4>
</div>
</div>
<div class="col">
<nav>
<ul class="nav-links">
<li>home</li>
<li>NextEvent </li>
<li>Music </li>
<li>About </li>
<li>Boooking </li>
</ul>
<div class="burger">
<div class="line2"></div>
<div class="line1"></div>
<div class="line3"></div>
</div>
</nav>
</div>
</div>
</header>
<section id="section1">
</section>
<section id="section2">
<header>
<h1> </h1>
<h2>Next event</h2>
<h3>Venue At:</h3>
<h4>TBA</h4>
</header>
<div id="getting-started">
<div class="container">
<div class="row">
<div class="col-md-4 m-auto offset-lg-3 col-lg-5">
<div class="card">
<div class="card-header">
<div class="card-body">
<table class="table" summary="date and time for the next event">
<tr>
<th>Days</th>
<th>Hours</th>
<th>Minutes</th>
</tr>
<tr>
<td id="day" class="display-4"></td>
<td id="hours" class="display-4"></td>
<td id="minutes" class="display-4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/jquery.countdown.js"></script>
<script src="../../Downloads/mftp_zip_2020_03_11_02_16_39/htdocs/assets/venuto/main2.js"></script> <!--conection to main.js !-->
</section>
<section id="section3">
<h1>About</h1>
</section>
<section id="section4">
<h1>Music</h1>
<article class="container box style2">
<div class="row gtr-0">
<div class="col-3 col-12-mobile"><img src="images/venuto/1798697_10202102944072424_1617307970_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1898181_10202102918071774_1708501880_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/1901776_10202102917311755_760656742_n.jpg" alt="" title="still in proggress" /></div>
<div class="col-3 col-12-mobile"><img src="images/venuto/10275374_10202690394478317_8154904436564081527_o.jpg" alt="" title="still in proggress" /></div>
</div>
</article>
</section>
<div id="section5"></div>
<section>
<h1>home</h1>
</section>
<script src="navbarjs.js"></script>
</body>
</html>
I have an assignment where I have a list of items on a menu placed at the left of the screen. When a menu item is clicked on, they're supposed to move outside the menu by using CSS/HTML only.
I was able to accomplish that using a combination of the :target pseudo-class and the href tag. But then I realized I couldn't go back to the original menu, as a menu item is always targeted and kept outside the menu.
At first, I thought to click again in the targeted div would remove the pseudo-class but obviously, it did nothing.
I believe the best way to return the menu to its original formation is to un-target the current item without clicking on another.
Here is the HTML:
<a class="card" id="card1" href="#card1">
<div class="avatar"></div>
<div class="info">
<p>Leah Shapiro</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card2" href="#card2">
<div class="avatar"></div>
<div class="info">
<p>Rob Been</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card3" href="#card3">
<div class="avatar"></div>
<div class="info">
<p>Peter Hayes</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
And the CSS:
.list {
height: 100%;
width: 200px;
background: #dddddd;
float: left;
}
.list .card {
border: solid;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
}
:target {
z-index: 1000;
background-color: red;
position: absolute;
left: 300px;
top: 200px;
}
https://codepen.io/maydanachi/pen/QXPYvy
I found many JS snippets I could use, but the requirements explicitly state that I use CSS/HTML only.
Just use :focus instead of :target
body,
html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
position: relative;
}
.screen {
height: 100%;
width: calc(100% - 200px);
background-color: tomato;
float: right;
}
.list {
height: 100%;
width: 200px;
background: #dddddd;
float: left;
}
.list .card {
border: solid;
display: flex;
align-items: center;
justify-content: center;
height: 55px;
}
.list a {
text-decoration: none;
}
:focus {
z-index: 1000;
background-color: red;
position: absolute;
left: 300px;
top: 200px;
}
.list .card:hover {
cursor: pointer;
background-color: rgba(143, 143, 143, 0.8);
}
.list .card:active {
background-color: teal;
}
.list .avatar {
height: 48px;
width: 48px;
border-radius: 50%;
background-color: #ccc;
user-select: none;
}
.list .info {
display: flex;
flex-direction: column;
align-items: flex-start;
user-select: none;
}
.list .info p {
margin: 0;
padding-left: 5px;
}
<!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">
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div class="list">
<a class="card" id="card1" href="#card1">
<div class="avatar"></div>
<div class="info">
<p>Leah Shapiro</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card2" href="#card2">
<div class="avatar"></div>
<div class="info">
<p>Rob Been</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card3" href="#card3">
<div class="avatar"></div>
<div class="info">
<p>Peter Hayes</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card4" href="#card4">
<div class="avatar"></div>
<div class="info">
<p>Dave Catching</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
<a class="card" id="card5" href="#card5">
<div class="avatar"></div>
<div class="info">
<p>Josh Homme</p>
<p>leah.shapiro#gmail.com</p>
</div>
</a>
</div>
<div class="screen"></div>
</body>
</html>