I have created a web page using flexbox and have included a responsive flex-navigation bar. However, when the hamburger is expanded it pushes the rest of the page down with it. I have tried positioning the .active class to absolute on the "display block" and z-index of 10000, but these do not help.I have also tried wrapping the nav inside the row flex container but that ruined the rest of the layout.
Have considered the the js fiddle found at this link:http://jsfiddle.net/hRKgV/ but it does not have a flex box layout and I am wondering if floats are true to the concept of flexbox as it also removes that element from the normal flow of the document?
Any suggestions would be greatful!
Here is the code for the index page:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background-color: #faf6bf;
}
.header {
background-image: url("images/index.jpg");
max-width: 100%;
height: auto;
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: 2px 2px 5px purple;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
#media screen and (max-width: 700px) {
h1 {
font-size: 40px;
}
h3 {
font-size: 26px;
}
}
.navbar {
position: relative;
font-size: 18px;
background-color: navy;
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
clear: both;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
position:
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
#media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
.row {
display: flex;
margin-left: 80px;
margin-right: 80px;
flex-wrap: wrap;
}
.fakeimg {
background-color: #faf6bf;
width: 100%;
padding: 20px;
}
.side {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 20px;
}
.side2 {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 50px;
}
.main {
flex: 60%;
background-color: #fffcc7;
padding: 20px;
}
.footer {
background-color: brown;
text-align: center;
color: white;
padding: 20px;
}
#media (max-width: 700px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i> </span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<div class="header">
<div class="hero-text">
<h1>I am Jane Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="side2">
<h4>follow me on socila media:</h4><br />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>
Is it something like this you're looking for:
const nav = document.getElementById('navbar');
const navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', () => {
nav.classList.toggle('active');
});
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background-color: #faf6bf;
position: relative;
}
.header {
background-image: url("images/index.jpg");
max-width: 100%;
height: auto;
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: 2px 2px 5px purple;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
#media screen and (max-width: 700px) {
h1 {
font-size: 40px;
}
h3 {
font-size: 26px;
}
}
.navbar {
position: absolute;
z-index: 10;
width: 100%;
height: 3rem;
font-size: 18px;
background-color: navy;
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
clear: both;
overflow: hidden;
transition: height 250ms ease-in;
}
.main-nav {
display: block;
list-style-type: none;
width: 100%;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
height: 18rem;
}
#media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 60px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
.row {
display: flex;
margin-left: 80px;
margin-right: 80px;
flex-wrap: wrap;
}
.fakeimg {
background-color: #faf6bf;
width: 100%;
padding: 20px;
}
.side {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 20px;
}
.side2 {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 50px;
}
.main {
flex: 60%;
background-color: #fffcc7;
padding: 20px;
}
.footer {
background-color: brown;
text-align: center;
color: white;
padding: 20px;
}
#media (max-width: 700px) {
.row {
flex-direction: column;
}
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar" id="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i> </span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
<div class="header">
<div class="hero-text">
<h1>I am Jane Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="side2">
<h4>follow me on socila media:</h4><br />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
I added a position: absolute; z-index: 10; to the .navbar class (probably a couple other minor changes too to get the snippet running correctly).
Edit
I also added in a transition effect. To do this, I changed how your toggle was working. Now, instead of changing the display attribute of .main-nav it just changes the height of the .navbar. The .active class is now applied to the navbar element.
Let me know if this works for you.
Related
Long story short: Is it possible to make the hover effect appear inside the animation box without going out of border? Right now it's because of the .menu li having a display: flex. Without it, animation breaks. I am pretty sure I'm doing something wrong but I haven't been able to figure it out. I'm a newbie so any help is appreciated. Code attached. Thanks in advance!
I have this --->>>
Looking to get this without breaking the animation ---->>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/158ff5ced2.js" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Live like legends</title>
<link rel="stylesheet" href="./css/style.css">
<script src="javakood.js"></script>
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="check">
<label for="check" class="menubtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo">
<img src="./veebipilt.png" width="128" height="56">
</div>
<ul class="menu">
<li>Beginning</li>
<li>About me</li>
<li>Statistics</li>
</ul>
<ul class="menu2">
<li><a class="speciall" href="#">Objectives</a></li> <! -- this is not a class typo, they need to be separated -->
<li><a class="special" href="#">Contact</a></li>
</ul>
</nav>
<! Esimene vahemik veebilehes kus on tekst ja pilt korvuti---->
<section class="home">
<div class="rida">
<div class="tekstall">
<h1>Tere tulemast minu lehele!</h1>
<p>siia tuleb veel midagi lahedat veel ei tea</p>
</div>
<div class="piltnext">
<img src="./12345.jpg" width="500" height="300">
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<section class="about">
<div class="tekstabout">
<h1><mark>Veidi</mark> minust</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar{
background: #cbcca3;
position: fixed;
width: 100%;
padding: 5px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
ul {
margin-bottom: 0;
}
.home{
background: url("./sigma.gif") no-repeat center;
background-size: cover;
height: 100vh;
}
.logo {
float: left;
line-height: 70px;
margin-left: 30px;
margin-right: 50px;
}
.menu{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu li {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
margin-right: 30px;
}
.menu li:after,
.menu li:before {
content: "";
position: absolute;
display: block;
border: 0px solid transparent;
}
.menu li:after {
width: 0%;
height: 80%;
border-top: 2px solid #8a2be2;
border-bottom: 2px solid #8a2be2;
transition: all 0.6s ease;
}
.menu li:before {
width: 120%;
height: 0%;
border-left: 2px solid #8a2be2;
border-right: 2px solid #8a2be2;
transition: all 0.5s ease;
}
.menu li:hover::before {
height: 75%;
}
.menu li:hover::after {
width: 110%;
}
.menu2{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
align-items: center;
}
.menu2 {text-align: right;}
.menu a {
margin: 0 5px;
font-size: 20px;
line-height: 70px;
text-transform: uppercase;
letter-spacing: 2px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
border-radius: 3px;
}
.menu2 a {
margin: 0 5px;
font-size: 20px;
text-transform: uppercase;
line-height: 70px;
text-shadow: -1px -1px blue;
color: blueviolet;
text-decoration: initial;
padding: 5px 5px;
letter-spacing: 2px;
}
a.special,a:hover{
background-color: ghostwhite;
transition: .5s;
}
p{
color: floralwhite;
}
.menubtn {
color: blueviolet;
font-size: 25px;
float: right;
display: none;
cursor: pointer;
}
#check{
display: none;
}
#media (max-width: 933px){
.menubtn{
display: block;
}
.menu li, .menu2 li{
position: fixed;
width: auto;
height: auto;
background: white;
text-align: center;
top: 70px;
left: 0;
}
}
.rida{
display: flex;
align-items: center;
justify-content: space-between;
}
.tekstall{
flex-basis: auto;
min-width: 300px;
margin-left: 20px;
padding-left: 30px;
}
.piltnext{
max-width: 100%;
padding: 20px;
height: auto;
margin-top: 0px;
}
I'm trying to practice my beginner html and CSS knowledge by making this template
https://www.w3schools.com/w3css/tryw3css_templates_band.htm
but the problem is when hitting inspect and reducing the width of the screen to see how my page looks like, I noticed that the div with the picture is getting smaller (which should as per the original one) but the div after it with the text (the one in green) is getting further away from it.
Is there a way to stop this from happening?
P.S. I made the div with the text in green to distinguish it for now only and the font awesome icons may not appear cuz I couldn't add the relevant CSS file of it here.
here is my page so far
<!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>Band</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
:root {
--main-padding: 20px;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Lato', sans-serif;
}
/* start of nav bar */
nav {
background-color: black;
color: white;
position: fixed;
z-index: 99999;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li,
nav i {
cursor: pointer;
padding: 15px 20px;
}
nav ul li:hover {
background-color: lightgray;
color: black;
}
nav ul li:hover a {
color: black;
}
nav ul li a {
color: white;
text-decoration: none;
}
.ddmenu {
position: relative;
}
.ddmenu::after {
content: "";
position: absolute;
border: 5px solid;
border-color: white transparent transparent transparent;
right: 5px;
top: 50%;
}
.ddmenu:hover::after {
border-color: black transparent transparent transparent;
}
.ddmenu ul {
display: none;
background-color: white;
position: absolute;
top: 100%;
left: 0;
}
.ddmenu:hover ul {
display: block;
}
.fa-magnifying-glass:hover {
background-color: tomato;
}
i.fa-bars {
display: none;
}
#media (max-width:600px) {
i.fa-magnifying-glass,
li:not(.home) {
display: none;
}
i.fa-bars {
display: block
}
i.fa-bars:hover {
background-color: lightgray;
color: black;
}
}
/* end of nav bar */
/* start of posters */
.posters {
padding: 0;
color: white;
text-align: center;
position: relative;
margin-top: 48px;
margin-bottom: 0;
height: 100vh;
}
.posters .container {
position: absolute;
top: 0;
left: 0;
width: 100%;
animation-duration: 12s;
animation-iteration-count: infinite;
}
.posters .container:first-of-type {
animation-name: la;
}
#keyframes la {
0% {
z-index: 1;
}
33% {
z-index: 1;
}
34% {
z-index: 0;
}
}
.posters .container:nth-of-type(2) {
animation-name: ny;
}
#keyframes ny {
0% {
z-index: 0;
}
33% {
z-index: 0;
}
34% {
z-index: 1;
}
67% {
z-index: 1;
}
68% {
z-index: 0;
}
}
.posters .container:last-of-type {
animation-name: chicago;
}
#keyframes chicago {
0% {
z-index: 0;
}
67% {
z-index: 0;
}
68% {
z-index: 1;
}
}
.posters .container>div {
position: relative;
height: 100%;
}
.posters .container>div img {
width: 100%;
height: inherit;
}
.posters .container>div .text {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
padding-bottom: var(--main-padding);
}
.posters .container>div .text h4 {
font-size: 25px;
font-weight: normal;
}
.posters .container>div .text p {
font-weight: bold;
}
#media (max-width:600px) {
.posters .container>div .text {
display: none;
}
}
/* end of posters */
/* start of band */
section#band {
padding: var(--main-padding);
width: 100%;
background-color: green;
margin-top: 0;
}
#band .container {
padding: var(--main-padding);
width: 70%;
margin: auto;
background-color: lightgreen;
text-align: center;
}
#band .text h3 {
font-size: 30px;
font-weight: normal;
letter-spacing: 3px;
}
#band .text p:first-of-type {
color: grey;
}
#band .text p:nth-of-type(2) {
text-align: left;
}
.name {
max-width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
padding: var(--main-padding);
}
.name img {
max-width: 90%;
}
#media (max-width:600px) {
.name {
flex-direction: column;
}
}
/* end of band */
</style>
</head>
<body>
<!-- Nav Bar -->
<nav>
<ul>
<li class="home">HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li class="ddmenu">MORE
<ul>
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-bars"></i>
</nav>
<!-- posters -->
<section class="posters">
<div class="container">
<div class="la">
<img src="https://www.w3schools.com/w3images/la.jpg" alt="">
<div class="text">
<h4>Los Angeles</h4>
<p>We had the best time playing at Venice Beach!</p>
</div>
</div>
</div>
<div class="container">
<div class="ny">
<img src="https://www.w3schools.com/w3images/ny.jpg" alt="">
<div class="text">
<h4>New York</h4>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
</div>
<div class="container">
<div class="chicago">
<img src="https://www.w3schools.com/w3images/chicago.jpg" alt="">
<div class="text">
<h4>Chicago</h4>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
</div>
</section>
<!-- band info -->
<section id="band">
<div class="container">
<div class="text">
<h3>THE BAND</h3>
<p><i>We love music</i></p>
<p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="name">
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
This was a little weird to fix due to the absolute positioning -- I've made it so that the poster is always 100% viewport height and the image will cover the whole poster -- your issue was that the image was shrinking to fit the width leaving a bunch of empty space below it
<!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>Band</title>
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
:root {
--main-padding: 20px;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Lato', sans-serif;
}
/* start of nav bar */
nav {
background-color: black;
color: white;
position: fixed;
z-index: 99999;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li,
nav i {
cursor: pointer;
padding: 15px 20px;
}
nav ul li:hover {
background-color: lightgray;
color: black;
}
nav ul li:hover a {
color: black;
}
nav ul li a {
color: white;
text-decoration: none;
}
.ddmenu {
position: relative;
}
.ddmenu::after {
content: "";
position: absolute;
border: 5px solid;
border-color: white transparent transparent transparent;
right: 5px;
top: 50%;
}
.ddmenu:hover::after {
border-color: black transparent transparent transparent;
}
.ddmenu ul {
display: none;
background-color: white;
position: absolute;
top: 100%;
left: 0;
}
.ddmenu:hover ul {
display: block;
}
.fa-magnifying-glass:hover {
background-color: tomato;
}
i.fa-bars {
display: none;
}
#media (max-width:600px) {
i.fa-magnifying-glass,
li:not(.home) {
display: none;
}
i.fa-bars {
display: block
}
i.fa-bars:hover {
background-color: lightgray;
color: black;
}
}
/* end of nav bar */
/* start of posters */
.posters {
padding: 0;
color: white;
text-align: center;
position: relative;
margin-top: 48px;
margin-bottom: 0;
height: calc(100vh - 48px);
min-height: 300px;
}
.posters .container {
position: absolute;
inset: 0;
animation-duration: 12s;
animation-iteration-count: infinite;
}
.posters .container:first-of-type {
animation-name: la;
}
#keyframes la {
0% {
z-index: 1;
}
33% {
z-index: 1;
}
34% {
z-index: 0;
}
}
.posters .container:nth-of-type(2) {
animation-name: ny;
}
#keyframes ny {
0% {
z-index: 0;
}
33% {
z-index: 0;
}
34% {
z-index: 1;
}
67% {
z-index: 1;
}
68% {
z-index: 0;
}
}
.posters .container:last-of-type {
animation-name: chicago;
}
#keyframes chicago {
0% {
z-index: 0;
}
67% {
z-index: 0;
}
68% {
z-index: 1;
}
}
.posters .container>div {
position: relative;
height: 100%;
overflow: hidden;
}
.posters .container>div img {
min-width: 100%;
min-height: 100%;
object-fit: cover;
position: relative;
left: 50%;
top: 50%;
transform: translate( -50%, -50% );
}
.posters .container>div .text {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(calc(var(--main-padding) * -1));
}
.posters .container>div .text h4 {
font-size: 25px;
font-weight: normal;
}
.posters .container>div .text p {
font-weight: bold;
}
#media (max-width:600px) {
.posters .container>div .text {
display: none;
}
}
/* end of posters */
/* start of band */
section#band {
padding: var(--main-padding);
width: 100%;
background-color: green;
margin-top: 0;
}
#band .container {
padding: var(--main-padding);
width: 70%;
margin: auto;
background-color: lightgreen;
text-align: center;
}
#band .text h3 {
font-size: 30px;
font-weight: normal;
letter-spacing: 3px;
}
#band .text p:first-of-type {
color: grey;
}
#band .text p:nth-of-type(2) {
text-align: left;
}
.name {
max-width: 100%;
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
padding: var(--main-padding);
}
.name img {
max-width: 90%;
}
#media (max-width:600px) {
.name {
flex-direction: column;
}
}
/* end of band */
</style>
</head>
<body>
<!-- Nav Bar -->
<nav>
<ul>
<li class="home">HOME</li>
<li>BAND</li>
<li>TOUR</li>
<li>CONTACT</li>
<li class="ddmenu">MORE
<ul>
<li>Merchandise</li>
<li>Extras</li>
<li>Media</li>
</ul>
</li>
</ul>
<i class="fa-solid fa-magnifying-glass"></i>
<i class="fa-solid fa-bars"></i>
</nav>
<!-- posters -->
<section class="posters">
<div class="container">
<div class="la">
<img src="https://www.w3schools.com/w3images/la.jpg" alt="">
<div class="text">
<h4>Los Angeles</h4>
<p>We had the best time playing at Venice Beach!</p>
</div>
</div>
</div>
<div class="container">
<div class="ny">
<img src="https://www.w3schools.com/w3images/ny.jpg" alt="">
<div class="text">
<h4>New York</h4>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
</div>
<div class="container">
<div class="chicago">
<img src="https://www.w3schools.com/w3images/chicago.jpg" alt="">
<div class="text">
<h4>Chicago</h4>
<p>Thank you, Chicago - A night we won't forget.</p>
</div>
</div>
</div>
</section>
<!-- band info -->
<section id="band">
<div class="container">
<div class="text">
<h3>THE BAND</h3>
<p><i>We love music</i></p>
<p>We have created a fictional band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="name">
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
<div>
<p>Name</p>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="">
</div>
</div>
</div>
</section>
</body>
</html>
I'm pretty much stuck with making side menu div's of my code filling the parent height to 100%. I've tried alot of googling and testing before comming to ask..
Code snippet: http://jsfiddle.net/zntxaspd/
html, body { height: 100%;}
.row.content { height: 100%; width:70%; margin: auto; }
.sidenav { padding-top: 20px;background-color: #f1f1f1; height: 100%;}
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
h5 { font-size: 14px; border-bottom: 6px solid red; font-weight: bold; }
.rightcontainer { width:100%; height:100% margin: auto; border: 0px solid; border-radius: 4px; margin-bottom: 5px; border-bottom: 6px solid red;}
.rightcontainer .accountpanel .columncontainer .col-sm-6 { padding-right: 0px; padding-left: 0px;}
.leftcontainer {width:100%; margin: auto; margin-bottom: 5px; border-bottom: 6px solid red; }
.leftcontainer .eventinfo {width:100%; height: 38px; margin-bottom: 5px; border: 1px solid gray; }
.leftcontainer .eventinfo .split { height: 17px; }
.leftcontainer .eventinfo .split span { font-size: 12px; }
.leftcontainer .banner {width: 100%; height: 75px; border: 1px solid gray; margin-bottom: 5px; }
I can not understand why both side menu's are filling just the height of their own content instead of filling height of the parent div. Is there something I'm doing wrong? It fills fine if I dont add !DOCTYPE html to my project, but from what I understand its bad solution so I should find other way around..
Best regards
http://jsfiddle.net/zntxaspd/6/
Add display: flex;to .row.content:
.row.content { height: 100%; width:70%; margin: auto; display: flex; }
Add flex: 1; to .sidebar:
.sidenav { padding-top: 20px;background-color: #f1f1f1; flex: 1}
Adjust your media query to keep it responsive:
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto; display: block;}
}
Use bootstrap-4 CSS to achieve the desired result
Bootstrap 4
Also removed the extra row content div
html,
body {
height: 100%;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
height: 100%;
width: 70%;
margin: auto;
}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {
height: auto;
}
}
h5 {
font-size: 14px;
border-bottom: 6px solid red;
font-weight: bold;
}
.rightcontainer {
width: 100%;
height: 100% margin: auto;
border: 0px solid;
border-radius: 4px;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.rightcontainer .accountpanel .columncontainer .col-sm-6 {
padding-right: 0px;
padding-left: 0px;
}
.leftcontainer {
width: 100%;
margin: auto;
margin-bottom: 5px;
border-bottom: 6px solid red;
}
.leftcontainer .eventinfo {
width: 100%;
height: 38px;
margin-bottom: 5px;
border: 1px solid gray;
}
.leftcontainer .eventinfo .split {
height: 17px;
}
.leftcontainer .eventinfo .split span {
font-size: 12px;
}
.leftcontainer .banner {
width: 100%;
height: 75px;
border: 1px solid gray;
margin-bottom: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
<div class="row justify-content-center">
<div class="col-sm-2 sidenav">
<div class="leftcontainer">
<div class="banner"> Get Client Banner </div>
<div class="banner"> Guides Banner </div>
<h5> Event Schedule </h5>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 H</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 Hr n</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>B</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0</span></div>
</div>
<div class="eventinfo">
<div class="split"><span><strong>Bl</strong></span></div>
<div class="split"><span>0 D 0 </span></div>
</div>
</div>
</div>
<div class="col-sm-7 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-3 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
I'm not entirely sure how to phrase this question, but I'll give it a try.
I have a website set up with a side navigation menu. When the menu is opened, the body content is pushed all the way off screen making the text unreadable. I want to know what css property I need to set to make the text overflow onto the next line.
An example of this can be seen in the W3Schools. When the menu is opened, the text does not disappear behind the screen.
CSS
html,
body {
height: 100%;
font-family: 'Ubuntu', sans-serif;
}
body {
padding-top: 70px;
}
body.push {
overflow-x: hidden;
}
p {
color: red;
word-wrap: break-word;
}
.navbar-custom {
border-radius: 0;
transition: margin-left 0.5s;
transition: 0.5s;
padding-bottom: 6px;
background-color: transparent;
border-bottom: 1px solid #e5e5e5;
}
.navbar-custom a {
transition: 0.5s;
color: black;
}
.navbar-custom.color {
background-color: white;
}
.navbar-custom.color a {
color: black;
}
.navbar-custom.push {
margin-left: 300px;
background-color: white;
border-bottom: 1px solid #e5e5e5;
}
.navbar-custom.push a {
color: black;
}
.row {
text-align: center;
}
#main {
padding-top: 50px;
transition: margin-left 0.5s;
}
#main.push {
margin-left: 300px;
}
#sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
padding-top: 40px;
transition: 0.5s;
font-size: 15px;
background-color: white;
}
#sidenav li {
border-bottom: 1px solid #e5e5e5;
}
#sidenav a {
padding: 15px 8px 20px 32px;
text-decoration: none;
color: #818181;
display: block;
transition: 0.3s;
}
#sidenav i {
padding: 15px 8px 20px 10px;
text-decoration: none;
display: inline;
overflow-x: hidden;
}
#sidenav a:hover,
#sidenav .offcanvas a:focus {
text-decoration: none;
color: #ffcc00;
}
#sidenav .social {
text-align: center;
padding: 15px 8px 20px 32px;
}
#sidenav .social i:hover {
transition: 0.3s;
color: #ffcc00;
}
#sidenav #nav {
position: absolute;
top: 0;
width: 300px;
margin: 0;
padding: 0;
list-style: none;
}
#sidenav.toggled {
width: 300px;
border-right: 1px solid #e5e5e5;
}
#media screen and (max-height: 450px) {
#sidenav {
padding-top: 15px;
}
#sidenav a {
font-size: 18px;
}
}
#media screen and (max-width: 500px) {
#main.push {
margin-left: 200px;
}
#sidenav .social {
text-align: left;
}
#sidenav.toggled {
width: 200px;
}
.navbar-custom.push {
margin-left: 200px;
}
}
HTML
<section id="sidenav">
<ul id="nav">
<li class="social">
<i class="fa fa-envelope"><a href="#" class="hidden-sm hidden-md hidden-lg"><span
class="fa fa-envelope"></span></a></i>
<i class="fa fa-github"><a target="_blank" href="#" class="hidden-sm hidden-md hidden-lg"><span
class="fa fa-github"></span></a></i>
<i class="fa fa-linkedin"><a target="_blank" href="#"
class="hidden-sm hidden-md hidden-lg"><span class="fa fa-linkedin"></span></a></i>
</li>
<li>Home <span class="glyphicon glyphicon-home"></span></li>
<li>Portfolio <span class="fa fa-folder-open"></span></li>
<li><a target="_blank" href="#">Resume <span class="fa fa-file"></span> </a>
</li>
</ul>
</section>
<nav class="navbar navbar-custom navbar-fixed-top">
<section class="container">
<section class="navbar-header">
<a onclick="toggleMenu()" class="navbar-brand">Menu <i class="fa fa-bars" aria-hidden="true"></i></a>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</section>
</section>
</nav>
<section id="main">
<section class="container">
<p>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</section>
</section>
JS
var main = $("#main");
var sidenav = $("#sidenav");
var body = $("body");
var navbarFixed = $(".navbar-fixed-top");
var navbar = $(".navbar-custom");
function toggleMenu() {
main.toggleClass("push");
sidenav.toggleClass("toggled");
body.toggleClass("push");
navbarFixed.toggleClass("push");
};
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
i am making a website and i have noticed that i cannot scroll using the scroll wheel on a mouse. I can use two-finger scrolling on my chromebook but not the scroll wheel on my pc. The issue is with both of the browsers i use; firefox and chrome.
Thanks in advance, Liam
css:
header {
width: 100%;
}
body {
margin: 0;
overflow: hidden;
}
footer {
clear: both;
height: 100px;
width: 100%;
background-color: #3d3d3d;
position: relative;
}
.nav {
width: 100%;
height: 50px;
background-color: #3D3D3D;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0)
}
.navwrap{
position: fixed;
width: 100%;
}
.name-logo {
width: 100%;
height: 350px;
background-color: #4BD150;
overflow: hidden;
}
.content {
float: left;
background-color: #f5fafa;
padding-left: 3%;
padding-right: 2%;
border-right: 4px solid #F5f5f5;
width: calc(65% - 4px);
z-index: 1;
height: 300px;
}
.sidebar {
width: 30%;
float: right;
background-color: #f5fafa;
height: 300px;
}
.social {
width: 30%;
float: right;
}
.social-icon {
float: right;
padding-left: 10px;
padding-top: 15px;
width: 35px;
}
#facebook {
padding-right: 15px;
}
.coppyright {
color: #fff;
padding-left: 25px;
width: 40%;
float: left;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.name {
width: 60%;
height: 100%;
padding-left: 100px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.logo {
width: 60%;
height: 100%;
float: right;
white-space:nowrap;
margin-top: 20px;
margin-right: 20%;
margin-left: 20%;
}
.logo-img {
width: 100%;
vertical-align: middle;
}
#nav {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
height: 50px;
}
#nav li {
float: left;
font-family: Ubuntu, sans-serif;
font-size: 20px;
}
#nav li a {
display: block;
padding-left: 15px ;
padding-right: 15px;
padding-top: 11px;
text-decoration: none;
font-weight: bold;
color: #fff;
height: 50px;
width: auto;
}
#nav li a:hover {
color: #fff;
background-color: #333333;
height: 39px;
}
#home {
margin-left: 20px;
}
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin">
<title>Hackapi Mockup</title>
</head>
<!--This is where the navbar and splash title goes-->
<body><header>
<div class="navwrap">
<div class="nav">
<ul id="nav">
<li id="home">Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
</div>
<div class="name-logo">
<div class="logo">
<span class="helper"></span>
<img class="logo-img" src="https://imagizer.imageshack.us/v2/821x224q90/674/hloZoz.png">
</div>
</div>
</header>
<!--Main content and sidebar-->
<div class="content">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="sidebar">
</div>
<!--Here is where all extra links, coppyrights and social media links go-->
<footer>
<div class="coppyright">
<h4>Coppyright Hackapi 2014</h4>
</div>
<div calss="social">
<img id="facebook" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/538/Kk3S3f.png">
<img id="twitter" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/913/xP6ctI.png">
<img id="gplus" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/536/nkHuql.png">
<img id="ytube" class="social-icon" src="https://imagizer.imageshack.us/v2/128x128q90/906/Sct7fy.png">
</div>
</footer>
</body>
I believe it is due to this style:
body {
overflow: hidden;
margin: 0;
}
You have to remove overflow:hidden as it is preventing the scrollbars from showing.
CSS:
overflow: auto;
OR
overflow-y: auto;
on body {}