I'm very new to coding but I decided to make a personal practice website. My page looks fine on my computer but when I view it on a phone or resize my page vertically, all of my content starts to overlap. How can I prevent it from overlapping?
I've read that it might be an issue with having position: absolute; in my code but I'm not sure how I would replace that.
<head>
<style>
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
</style>
</head>
<body>
<div class="centered logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="lower-center location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</body>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
</html>
It's better to add all title elements inside the vertically centered <div> to prevent overlap.
As you resize the screen, the centered <div> will reposition itself according to the changes made. But what's inside the <div> will be unchanged. Think of it like a component or a piece of a puzzle, you structure it as you desire and then the piece responds as a whole to the external changes.
Try the following snippet:
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.centered {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align:center;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.lower-center {
position: absolute;
top: 55%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
line-height: 18px;
text-align: center;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
position: absolute;
bottom: 0;
width: 97%;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
<body style="vertical-align: middle;">
<!--------- centered element -------->
<div class="centered">
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
</div>
<!----------------------------------->
</body>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
First, make sure you have the below lines in the <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
These enable responsiveness.
Then, in the <body> tag:
<div class="logosize">
<span class="logo" id="typewriter">daniel m.</span>
</div>
<div class="lower-center location-text">
<span>
<span style='font-size:13px;'>📍</span>
las vegas
</span>
<span>web developer _ creator</span>
</div>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
Notice, that <footer> should also be in the <body>. The rest code here is same, except that I've removed some unnecessary tags.
And finally changes in the CSS:
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
/* Instead of display: block; Add the below lines: */
height: 100vh; /* So body will have the full screen height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* And the tags inside the body i.e. 2 divs and 1 footer - these will be aligned in a column and will be centered horizontally and vertically */
}
.centered {} /* No need of this */
.lower-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* With this, the 2 span's in this div will be aligned in a column and will be centered horizontally and vertically. */
}
Since you are aware of display: flex I would use that. It is definitely better than the position absolute approach because items in a flex box will not collide.
Here is the solution I came up with using Flexbox, note a few things:
the .centered css declaration
I added a <div class="centered"> around the two divs that originally had a centered class
Just a note: it's best practice to have everything that is visible to the user or a user might interact with (i.e. Javascript) within the <body> tag, so I moved the <footer> inside the body
.logo {
color: white;
font-size: 2em;
font-weight: bolder;
}
a:link {
color: white;
}
a:visited {
color: white;
}
body {
background-color: black;
color: white;
font-family: Arial, Helvetica, sans-serif;
display: block;
}
.logosize {
font-size: 2em;
letter-spacing: -5px;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
}
.location-text {
font-size: 15px;
}
footer {
text-decoration: none;
font-size: 1em;
height: 4rem;
display: flex;
justify-content: center;
}
.footer ol {
display: flex;
list-style: none;
}
.footer ol li {margin: 1em;}
.footer ol li a{
text-decoration: none;
}
.footer ol li a:hover {color: rgb(83, 54, 150);}
<html>
<head>
</head>
<body>
<section class="centered">
<div class="logosize">
<p class="logo" id="typewriter">daniel m.</p>
</div>
<div class="location-text">
<p><span style='font-size:13px;'>📍</span>
las vegas
<br>web developer _ creator</p>
</div>
<footer class="footer">
<ol>
<li><img class="instagram-icon" src="images/instagram-icon.png"></li>
<li><img class="twitter-icon" src="images/twitter-icon.png"></li>
<li><img class="github-icon" src="images/github-icon.png"></li>
</ol>
</footer>
</section>
</body>
</html>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I'm struggling with is the media query/responsiveness for my banner image, it won't scale down when I go to tablet or phone screen.
#import url('https://fonts.googleapis.com/css?family=poppins:200,300,400,500,600,700,800,900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
background: rgb(17, 17, 17);
min-height: 200vh;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.4s;
padding: 40px 100px;
z-index: 100000;
}
header.sticky {
padding: 5px 100px;
background: #fff;
}
header .logo {
position: relative;
font-weight: 400;
color: #fff;
text-decoration: none;
font-size: 3em;
letter-spacing: 2px;
transition: 0.6s;
font-family: 'Barlow', sans-serif;
}
header .logo:hover {
color: rgb(24, 24, 24);
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
font-size: 23px;
font-family: 'Barlow', sans-serif;
}
header ul li a:hover {
color: rgb(24, 24, 24);
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(images/banner.jpg);
background-size: cover;
opacity: .4;
}
header.sticky .logo, header.sticky ul li a {
color:#000
}
.h1 {
color: rgb(255, 255, 255);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
width: 80%;
padding: 20px;
text-align: center;
font-size: 60px;
}
.image1 {
margin-top: 10px;
margin-left: 10px;
border-radius: 19px;
}
/* about me */
.about {
width: 100%;
padding: 78px 0px;
background-color: #191919;
}
.about img {
height: 800px;
width: 520px;
padding-left: 12px;
}
#media (max-device-width: 500px) {
.about img {
padding-right: 20px;
height: 500px;
}
}
.about-text {
width: 550px;
}
.main {
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.about-text h1 {
color: #fff;
font-size: 80px;
text-transform: capitalize;
margin-bottom: 20px
}
.about-text h5 {
color: #fff;
font-size: 25px;
text-transform: capitalize;
margin-bottom: 25px;
letter-spacing: 2px;
}
.about-text p {
color: #fcfc;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
button {
background: #f9004d;
color: #fff;
text-decoration: none;
border: 2px solid transparent;
font-weight: bold;
padding: 13px 30px;
border-radius: 30px;
}
button:hover {
background: transparent;
border: 2px solid #f9004d;
cursor: pointer;
}
.name {
font-size: 30px;
color: #fcfc;
letter-spacing: 5px;
}
/* footer */
footer {
height: auto;
width: 100vw;
font-family: "poppins";
padding-top: 40px;
color: #fff;
background: rgb(17, 17, 17);
}
.footer-content {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.footer-content h3 {
font-size: 1.8rem;
font-weight: 400;
text-transform: capitalize;
line-height: 3rem;
}
.footer-content p {
max-width: 500px;
margin: 10px auto;
line-height: 28px;
font-size: 14px;
}
.socials {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin: 1rem 0 3rem 0;
}
.socials li {
margin: 0 10px;
}
.socials a {
text-decoration: none;
color: #fff;
}
.socials a i {
font-size: 1.1rem;
transition: color .4s ease;
}
.socials a:hover i {
color: #000;
}
.footer-bottom {
width: 100%;
padding: 20px 0;
background: #000;
text-align: center;
}
.footer-bottom p {
font-size: 14px;
word-spacing: 2px;
text-transform: capitalize;
}
.footer-bottom span {
text-transform: uppercase;
opacity: .4;
font-weight: 200;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>enDURANCE FIT, Andrea Durance Personal Trainer</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;600;700&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.css">
</head>
<body>
<div>
<header>
enDurancefit
<ul>
<li>Home</li>
<li>About Me</li>
<li>Services</li>
<li>Testimonies</li>
<li>Contact Me</li>
</ul>
</header>
<section class="banner">
</section>
<h1 class="h1">Welcome To enDurance fit <p style ="font-family: Rajdhani">Andrea Durance</p><p>Personal Trainer</p> </h1>
</div>
<!--Section 2: About me-->
<section class="about" id="aboutme">
<div class="main">
<img src="images/profile.jpg">
<div class="about-text">
<h1>About Me</h1>
<h5>Personal Trainer <span style="color: #f9004d;"> & Fitness Instructor</span></h5>
<p>I have 5 years’ experience within the fitness industry, firstly as a level 2 fitness instructor, then a level 3 personal trainer, also teaching various classes along the way, including spin, kettlebells and bootcamps.
My passion for fitness began in my early teens around the age of 13-14.
<p> This is where my aspirations to become a personal trainer began, and not long after that is when my career began. The manager of the gym where I was training at the time recognised my passion and offered me work experience, which led on to an apprenticeship in which I gained my fitness instructing qualification. Leading on from this I completed my level 3 personal training through a different apprenticeship based at another gym.</p>
<p>A funny fact about the name of my company ‘enDurancefit’, is that I first came up with it when I was about 14, and I was dead set that one day I will have a personal training business and I wanted it to be called enDurancefit, and here we are! Moral of the story, if you have a goal, stick at it and don’t lose sight of it no matter the setbacks you may encounter! </p>
<p>Training and exercise not only keeps me physically well, but mentally well also. One of the many reasons I love it, one of my aims is to help my clients keep physically and mentally well with a combination of positive coaching and lifestyle changes.
<p>Training and exercise is more than just the physical results, of course seeing muscle growth/fat loss/weight gain or loss depending on the goal is always something to be proud of. But for most people training becomes their ‘me’ time, time to forget life’s stresses and a time to focus on you, your goals and your own health and wellbeing.
I want to help my clients reach a happy, healthy, and sustainable lifestyle, training to their maximum capabilities and smashing goals set, also whilst enjoying life.</p>
<p>FITTER, HEALTHIER, STRONGER, AND HAPPIER.
enDurancefit <br>
<div class="name" > ANDREA DURANCE </div>
</p>
<button type="button">Contact Me</button>
</div>
</div>
</section>
<section>
<footer class="footer-content">
<div>
<h3>enDurancefit</h3>
<p>Thank you for visiting, dont forget to check out my socials.</p>
<ul class="socials">
<li><i class="fab fa-facebook-square"></i></li>
<li><i class="fab fa-twitter-square"></i></li>
<li><i class="fab fa-youtube-square"></i></li>
</ul>
</div>
<div class="footer-bottom">
<p>Copyright ©2021 enDurance fit. designed by <span>Andrew Hinkley</span></p>
</div>
</footer>
</section>
</body>
<!--Scripts-->
<!--Script for nav bar-->
<script type="text/javascript">
window.addEventListener("scroll", function(){
var header = document.querySelector("header");
header.classList.toggle("sticky", window.scrollY > 0);
})
</script>
<!--Scrip End-->
</html>
Well done Andrew. The problem is that you've fixed both the height and width for your image. You can try fixing one of them, not both. And also object-fit: cover; helps keeping the aspect ratio.
img {
height: 500px;
width: 100%;
object-fit: cover;
}
or
img {
width: 500px;
height: 100%;
object-fit: cover;
}
I am working on a school project I want to do a responsive text which is similar to the picture below and further when it switch to mobile view the text have to change its position and fit below the hero image.
how to change the size according to the screen size?
I am a beginner trying to learn things on my own.
#import url('https://fonts.googleapis.com/css?family=Raleway');
* {
font-family: Raleway;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.navbar {
display: flex;
position: relative;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
}
.brand-title {
font-size: 1.5rem;
margin: .5rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
display: block;
text-decoration: none;
color: white;
padding: 1rem;
}
.navbar-links li:hover {
background-color: #555;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
.img-hover-zoom {
height: 500px;
overflow: hidden;
float: left;
}
.img-hover-zoom img {
transition: transform .5s ease;
}
.img-hover-zoom:hover img {
transform: scale(1.5);
}
.hero-text {
grid-area:auto;
overflow: hidden;
text-align: left;
position: absolute;
top: 30%;
left: 55%;
transform: translate(-50%, -50%);
color: rgb(0, 0, 0);
}
h1 {
text-align: left;
text-transform: uppercase;
font-family: Agency FB, Helvetica, sans-serif;
font-size: 2em;
}
p {
font-size: 3vh;
font-family: Arial, Helvetica, sans-serif;
}
#media (max-width: 650px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.toggle-button {
display: flex;
}
.navbar-links {
display: none;
width: 100%;
}
.navbar-links ul {
width: 100%;
flex-direction: column;
}
.navbar-links ul li {
text-align: center;
}
.navbar-links ul li a {
padding: .5rem 1rem;
}
.navbar-links.active {
display: flex;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive website</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css#3.0.0/reset.min.css" />
<link rel="stylesheet" href="/Assets/style.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="brand-title">Brand Name</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="img-hover-zoom">
<img src="/img/hero.jpg" alt="This zooms-in really well and smooth" width="500px" height="500px">
</div>
<div class="hero-text">
<h1>Travel around the World</h1>
<br><br>
<p>Traveling is a very crucial part of life as it is the best way to get out of the busy schedule.
It is also to experience life in different ways.Traveling is actually a good remedy for stress, anxiety
and depression. It also improves the mental and physical health. We only have one life and
we should thank it for making us more advanced creature on this planet. Not only do we get to
experience the beauty of nature, different geographies ,topographies, and people.
</p>
</div>
</header>
<script src="/Assets/main.js" defer></script>
</body>
</html>
on my website
how to avoid this unnecessary height in responsive view?
i tried everything but still not getting
and if possible can anyone suggest me how to make it responsive where both top headers are in left in column which must appear on clicking a hamburger
var main = document.getElementById('main');
function clicked() {
main.classList.toggle("mystyle");;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 12px;
}
body {
background-color: black;
width: 100%;
height: 100vh;
}
.header1 {
display: flex;
justify-content: flex-end;
width: 100%;
align-items: center;
background-color: transparent;
color: aliceblue;
}
.main {}
.info {
display: flex;
flex-direction: column;
padding: 20px;
}
.header2 {
width: 100%;
display: flex;
color: aliceblue;
justify-content: space-around;
align-items: center;
background-color: transparent;
height: 60px;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
.navbar {}
.navbar ul {
display: flex;
flex-direction: row;
list-style: none;
position: relative;
}
.navbar ul ul {
top: 70px;
width: fit-content;
padding: 0 30px 0 30px;
display: none;
font-size: 1rem;
line-height: .01px;
z-index: 10;
transition: all 2s ease;
background-color: white;
}
.navbar ul ul li a {
color: black;
}
.navbar ul li:hover ul {
display: block;
opacity: 1;
}
a {
text-decoration: none;
color: aliceblue;
}
li {
padding: 30px;
}
.sicons {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.sicons img {
display: block;
padding: 5px;
}
.text {
z-index: 1;
position: relative;
top: 0;
width: 50%;
display: flex;
margin-left: 50px;
flex-direction: column;
margin-top: 60px;
height: auto;
line-height: 8rem;
background-color: transparent;
font-weight: 600;
}
.st1 {
font-size: 1.6rem;
color: white;
}
.nd2 {
font-size: 8rem;
color: crimson;
}
.th3 {
font-size: 8rem;
color: white;
}
.btn button {
left: 0;
width: 220px;
height: 70px;
background-color: transparent;
border-radius: 50px;
color: white;
font-size: 1.2rem;
border: 1px solid white;
padding: 15px;
}
.active,
.navbar ul li:hover {
border-bottom: 1px solid crimson;
}
.mystyle {
display: none;
}
/* mediaqueries */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>sample</title>
</head>
<body>
<div id="main">
<div id="header1" class="header1">
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/clock--v3.png" />
<div class="info">
<span style="color: crimson;">HOURS</span><span>Mon - Sat
8.00 - 18.00</span>
</div><img src="https://img.icons8.com/ios-glyphs/30/fa314a/phone-disconnected.png" />
<div class="info">
<span style="color: crimson;">Call</span>+91 878778777</span>
</div>
<img src="https://img.icons8.com/ios-glyphs/30/fa314a/marker--v1.png" />
<div class="info">
<span style="color: crimson;">Address</span><span>India</span>
</div>
</div>
<hr style="color: crin;">
<div id="header2" class="header2">
<div class="navbar">
<ul class="mt">
<li class="active">Home</li>
<li class="">About</li>
<li class="">Programs
<ul>
<li> School Program</li>
<hr>
<li> Single Program</li>
<hr>
<li> Schedule</li>
<hr>
<li> Workshop and events</li>
<hr>
<li> Get Quote</li>
</ul>
</li>
<li class="">Blog</li>
<li class="">Shop</li>
<li class="">Elements</li>
</ul>
</div>
<div class="sicons">
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/facebook-new.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/twitter.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/youtube-play.png" />
<img src="https://img.icons8.com/ios-glyphs/30/ffffff/instagram-new.png" />
</div>
</div>
</div>
<div class="text">
<div class="st1">ENROLL TODAY</div>
<div class="nd2">Learn To</div>
<div class="th3">Play Guitar </div>
<div class="btn">
<button onclick="clicked()"> START NOW </button>
</div>
</div>
</body>
</html>
Your .text has margin-top: 60px; and line-height: 8rem is this the unneccessary height you were looking for?
You can use Browser development tools to find where stylings come from:
As for your question about the hamburger menu button... you can search stackoverflow for examples. Just type "how to make burger button" or something in the search bar at the top.
One result here: Javascript hamburger menu toggle (this is about an error someone had but you can copy&paste the correct source code from there if you also read the solution).
You can also search the internet for tutorials on this. One tutorial found here:
https://dev.to/ljcdev/easy-hamburger-menu-with-js-2do0
Below are the HTML, CSS, and JS code in which I am facing the problem, and not able to attain the functionality that I am supposed to.
//This is where I think the prblem is but I am not able to figure out how to correct it
window(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
}
})
});
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
position: fixed;
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
*background: #ffffff;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="src=" https://code.jquery.com/jquery-3.5.1.min.js ""></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
While scrolling down the background of the nav-bar should turn white but it's not behaving in that way it should be behaving. What would be the easier way to attain this functionality if I am not supposed to do it this way.
Is there any problem if the navbar is always fixed?
Add background-color: white; to the .navbar class and check if that is satisfactory. This allows you to make the navbar background white and the page text goes behind the navbar on scrolling. If that satisfies you, then you can even remove the jquery code.
Try like this:
//This is where I think the prblem is but I am not able to figure out how to correct it
(function() {
$(window).scroll(function() {
if (this.scrollY > 20) {
$('.navbar').addClass('sticky');
} else {
$('.navbar').removeClass('sticky');
}
})
})();
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
padding: 80px 0;
background: #ffffff;
position: fixed;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
Fixed HTML syntax (<script> src), JavaScript syntax (})()) and CSS syntax (background without *)
In the JavaScript, remove the class again when the condition is not met
In the CSS, set position: fixed; when the .sticky class is present, not the other way around
Look at position: sticky for a pure CSS way to do this, e.g.:
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&family=Ubuntu:wght#400;500;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/* Navbar styling */
.navbar {
width: 100%;
font-family: "Ubuntu", "sans-serif";
padding: 80px 0;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar.sticky {
background: #ffffff;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0px;
}
.navbar .max-width .logo a {
color: crimson;
}
.navbar .max-width .logo a span {
color: #000;
}
.navbar .logo a {
font-size: 35px;
font-weight: 600;
}
.navbar .menu li {
list-style: none;
display: inline-block;
}
.navbar .menu li a {
color: crimson;
font-size: 18px;
font-weight: 500;
margin-right: 25px;
transition: color 0.3s ease;
}
.navbar .menu li a:hover {
color: #000;
}
/* Home Section */
.home {
margin-top: -60px;
display: flex;
background: url("images/banner.png") no-repeat center;
height: 100vh;
min-height: 500px;
font-family: "Ubuntu", sans-serif;
}
.home .max-width {
margin: auto 0px auto 370px;
}
.home .home-content .text-1 {
font-size: 27px;
}
.home .home-content .text-2 {
font-size: 75px;
font-weight: 600;
margin-left: -3px;
}
.home .home-content .text-3 {
font-size: 40px;
margin: 5px 0;
}
.home .home-content .text-3 span {
color: crimson;
font-weight: 500;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personal Portfolio Website</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<nav class="navbar sticky">
<div class="max-width">
<div class="logo">Aksh<span>at Saxena</span></div>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Skills</li>
<li>Teams</li>
<li>Contacts</li>
</ul>
</div>
</nav>
<!-- home section start -->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Akshat Saxena</div>
<div class="text-3">And i'm a Web <span>Web Developer</span></div>
</div>
</div>
</section>
<p>Hi, I am Akshat. I have over four years of experience in WordPress website development. If you are looking for a complete high-end, up-to-date, professional, and responsive WordPress website then you are in the right place. I will develop stunning and
captivating websites for both businesses and individuals. I would love to help you with your desire website project. Feel free to contact me, Cheers!
</p>
<script src="script.js"></script>
</body>
</html>
I first set .submenu to display:none;. And then I set .recipe:hover .submenu{display:block;} . When I hover over the .recipe, I wanted to make .submenu display: block;. But it isn't working. Can you tell me why it isn't working? I can't really figure this out. Is using javascript the only way I can solve this problem? Here's my code. Thank you
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
I'm not the best with this, but I'd say it might have something to do with selecting the .recipe:hover and then selecting .submenu right after it:
.recipe:hover .submenu{
display: block;
}
You need to actually add the recipe class onto an element, then in your CSS, you need to add ~ to signify that the elements are on the same level in the DOM.
I have also made some modifications to the CSS in order to make sure the submenu does not disappear.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a + a {
box-shadow: -4px -3px 0 -3px rgb(155, 155, 155);
}
.submenu {
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a {
color: black;
text-decoration: none;
flex-grow: 1;
height: 30px;
padding-bottom: 6px;
}
.recipe:hover ~ .submenu {
display: block;
}
.submenu:hover {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
For more information on the general sibling combinator (~), please read the MDN docs.
As NoahRGB said, CSS selectors cannot have that syntax.
This:
.recipe:hover .submenu
will not work.
If you want it to select the hover of both the submenu and the recipe classes, "chain" them:
.recipe.submenu:hover
being sure not to put any spaces between .recipe and .hover.
If you wanted to set it to display: block; when the .recipe is hovered and the .submenu is not hovered, simply put display: block; in the .submenu class selector independently from the .recipe:hover selector like this:
.submenu {
...
display: block;
}
.recipe:hover {
...
display: block;
}
.recipe:hover .submenu{display:block;} implies that your .submenu element is a child of .recipe.
You need to change your markup to something like:
<a class="recipe" href="Recipe.html">
Recipe
<span class="submenu">
coffee<
</span>
</a>
Or, for a fore semantic markup, especially if your sub-menu will receive more items you could do:
<ul class="menu">
<li>
<a class"recipe" href="Recipe.html">Recipe</a>
<ul class="submenu">
<li>coffee</li>
</ul>
</li>
</ul>
and change your css to:
.menu li:hover .submenu { display:block; }
You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
as per the post How to change one element while hovering over another
!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover ~ .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
<a class="recipe" href="Recipe.html">Recipe</a>
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
</html>
You simply add ~ between selectors to adjance them together:
.recipe:hover ~ .submenu{
display: block;
}
I would say that you have to style your submenus in a structural way so that when you hover the element they would be visible when you try to hover submenus.
In your case submenu will get hidden if you try to make it visible. I have changed the structure a bit to show the submenu. You can more optimise it.
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(2) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(3) {
flex-grow: 1;
}
.submenu {
position: absolute;
margin-top: 36px;
}
.submenuwrapper {
position: absolute;
background-color: #f2efed;
width: 200px;
height: 190px;
font-size: 16px;
font-weight: 300;
padding: 40px;
text-decoration: underline;
display: none;
}
a {
color: black;
text-decoration: none;
}
.recipe:hover>.submenuwrapper {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<ul class="mainmenu">
<li>home</li>
<li class="recipe">Recipe
<div class="submenuwrapper">
<div class="submenu">
coffee
</div>
</div>
</li>
<li>QNA</li>
</ul>
You can add !important after your code to make it principal.
.recipe:hover .submenu{
display: block !important;
}
Can you upload the whole code in a codeopen.io? So you can show us exactly what you need.