Hello I just started with HTML & CSS and I am currently working on my first website. I have the problem that my nav bar delays the div below it when the div (called Start) is set to relative. I have to scroll to see the full image in the div. But when I set it to absolute it centers the div perfectly but the nav bar is not visible anymore. I would be grateful if someone could help me!
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="images/RATA-small.svg" alt="RATA">
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
position: relative;
z-index: 0
}
I have to scroll to see the full image in the div.
That sounds like the image height is simply too large for your screen, here I set it to 200px:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
/************** PARAM SELECTORS ******************/
body {
margin: 0;
}
/*******************CLASS SELECTORS*****************/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #191919;
z-index: 1;
}
li, a, button {
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.Logo {
cursor: pointer;
height: 100px;
margin: 0;
}
.nav__links {
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9;
}
.cta button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
.cta button:hover {
background-color: rgba(0, 136, 169, 0.8)
}
/**Div**/
.Start {
position: relative;
bottom: 0;
width: 100%;
}
/** Image in Div**/
.background {
margin-top: 0px;
bottom: 0;
z-index: 0;
width: 100%;
height: 200px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>RATA</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<header>
<img class="Logo" src="images/R-white.png" alt="Skull-Logo">
<nav>
<ul class="nav__links">
<li>Roadmap</li>
<li>About</li>
<li>Team</li>
<li>FAQ</li>
</ul>
</nav>
<a class="cta" href="#"><button>Mint</button></a>
</header>
<div class="Start">
<img class="background" src="https://images.unsplash.com/photo-1648852071390-7a17e3f2580a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80">
</div>
</body>
</html>
Click the Full Page button to see the snippet in full screen of your device
Related
So I am new to web development and was trying to practice by making a portfolio for myself but I ran into a slight issue. It seems that when a set margin-top to a divider, my navigation bar shifts a bit to the right.
So for some reason, when I apply "margin-top: 300px;" to the ".header" class, my navigation bar shifts to the right a bit.
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#400;500;600;700&display=swap');
* {
font-family: 'Poppins', 'sans-serif';
padding: 0px;
margin: 0px;
box-sizing: border-box;
scroll-padding-top: 1rem;
scroll-behavior: smooth;
list-style: none;
text-decoration: none;
}
body {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 10px;
cursor: pointer;
}
.nav-header {
color: var(--text-color);
}
.nav-header h2 {
font-weight: 500;
margin: 0;
padding: 0;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
font-weight: 500;
}
nav ul li a {
color: var(--text-color);
transition-duration: 0.7s;
}
nav ul li a:hover {
color: var(--text-highlight)
}
nav ul li a:active {
color: var(--text-active);
}
nav ul li a span {
color: var(--text-active);
}
:root {
--text-color: #000000;
--text-highlight: #D3D3D3;
--text-active: #6b84d1;
}
.container {
max-width: 1300px;
margin: auto;
padding-left: 25px;
padding-right: 25px;
}
.header {
text-align: center;
margin-top: 300px;
;
}
.header h1 {
color: rgb(255, 100, 0);
font-size: 64px;
}
.header p {
font-weight: 500;
font-size: 36px;
}
.header hr {
margin-top: 225px;
}
<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>Kelvin Kuoch | Portfolio</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/d4a6ce6cea.js" crossorigin="anonymous"></script>
<script>
function scrollToTop() {
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<div class="container">
<div class="navbar">
<a class="nav-header">
<h2 onclick="scrollToTop()">Kelvin Kuoch</h2>
</a>
<nav>
<ul>
<li><a><span onclick="scrollToTop()" class="homeBtn">Home</a></span>
</li>
<li>Work</li>
<li>About</li>
</ul>
</nav>
<hr id="nav-div">
</div>
<div class="header">
<h1>Hello!</h1>
<h2>I'm Kelvin, a <br> highschool student <br> based in Australia.</h2>
<hr>
</div>
<div class="mid-container" id="my-work">
<h1>My Work</h1>
</div>
</div>
</body>
I think there is problem with your .navbar class; when I remove the extra margin it showing well:
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 5px 20px 5px 20px;
z-index: 100;
background-color: white;
margin: 10px 25px 10px 0px;
cursor: pointer;
}
Before removing the margin:
After removing it is fine now:
But I suggest you to use Bootstrap navigation which are fully responsive.
This question already has an answer here:
Understanding z-index stacking order
(1 answer)
Closed last year.
I am trying to create a header that when you scroll it will stick to the top of the page.
I have tried positon: fixed but it moved behind the the div containing the image. I tried sticky it's the same story. Anh as you can see I tried position: fixed and sticky on some placed to see i it would work but it doesn't.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<!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>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<img class="header_logo" src="./youtube_logo.png" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
</div>
</body>
</html>
Just add z-index:100; to your header and it remains on top when scrolling and the image goes behind.
Reference for z-index
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
z-index:100;/* add this */
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<!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>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<img class="header_logo" src="./youtube_logo.png" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="./2f606ad14bf9171e5f41b42a01b4441f.jpg">
</div>
</body>
</html>
Use a positive z-index value for header
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/* padding-top: 100px; */
}
.section1 {
/* position: sticky; */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
text-align: center;
color: blueviolet;
}
.section1 img {
/* position: sticky; */
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
li,
a,
button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
}
header {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: #24252a;
z-index: 1;
}
.header_logo {
cursor: pointer;
margin-left: -70px;
}
.nav_links {
list-style-type: none;
}
.nav_links li {
display: inline-block;
padding: 0px 20px;
}
.nav_links li a {
transition: all 0.3s ease 0s;
}
.nav_links li a:hover {
color: #0088a9;
}
button {
padding: 9px 25px;
background-color: rgba(0, 139, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 139, 169, 0.8);
}
<header>
<img class="header_logo" src="https://via.placeholder.com/200" alt="youtube's logo" width="5%" height="5%">
<nav=c lass="navbar">
<ul class="nav_links">
<li>SERVICE</li>
<li>STORE</li>
<li>CONTACT</li>
<li>MORE</li>
</ul>
</nav>
<a class="social_buttion" href="#"><button>SOCIAL</button></a>
</header>
<section class="section1">
<img class="page_logo1" src="https://via.placeholder.com/200">
<div class="centered">
this is center
</section>
</div>
<div class="section2">
<img class="page_logo2" src="https://via.placeholder.com/200">
</div>
Im trying to build my website for my school project and im trying to make the navigation bar using flexbox. Everything else is working fine but for some reason the links Tietoa, Usein ja Yhteyttä are stacking on each other and I cant get it to work. I've tried adding the display flex and content justify in the nav and ul links but it still doesnt work
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav__links {
list-style: none;
display: inline-block;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
Your class names in html and css are different fix them :
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap');
body {
background-color: #F5F5F5;
color: black;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: 1px solid red;
}
li, a, button {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: black;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
background-color: white;
box-shadow: 0px 2px 5px lightgray;
}
.logo {
cursor: pointer;
width: 100px;
height: 100px;
}
.nav_links {
list-style: none;
display: flex;
flex-direction:row;
}
.nav_links li {
display:block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #0088a9
}
button {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover {
background-color: rgba(0, 136, 169, 0.8);
}
<!DOCTYPE html>
<head>
<meta charset="utf-8"
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css"
</head>
<body>
<header>
<img class="logo" src="logo.png" alt="logo">
<nav>
<ul class="nav_links">
<li>Tietoa</li>
<li>Usein</li>
<li>Yhteydet</li>
</ul>
</nav>
<a class="cta" href="#"><button>yhteyttä</button></a>
</header>
</body>
</html>
So I am extremely new to coding and I am doing this for my career school capstone project and I am running into a lot of problems. Mainly two: How to put the image above the content box? (even with a transparent background).
Here is my Code:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: #FFFFFF;
opacity: 0.5;
display: flex;
position: relative;
}
#box img:logo.png {
opacity: 1;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
The white box appears next to the image. I wanted it to be inside the box. I also wanted to box to have it's own set of opacity and colors. Which I know that I need to adjust my DIV boxes and create better ones but I'm not sure where to start #1, and I don't necessarily have any guidance on how to do so.
So first at all:
If you want to make the background of the box a bit transparent then you should not give an opacity: 0.5; but a background: rgba(255,255,255,0.5);
Then I also saw this in your CSS code:
You used a class for the box in the HTML. For the box-image in CSS you used an ID. And if you want to address the image in the Box class then you don't say .box img:logo.png but .box img
The correct CSS code should look like this:
Here is the whole revised code again. If something is missing then let us know:
/*Header Begins*/
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #FFDAB9;
}
li, a, button {
font-family: "Monserrat", sans-serif;
font-weight: 500;
font-size: 16px;
color: #FFFFFF;
text-decoration: none;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
box-shadow: 0 2px 2px -2px rgba(0,0,0,.5);
}
.logo {
cursor: pointer;
}
.nav__links{
list-style: none;
}
.nav__links li {
display: inline-block;
padding: 0px 20px;
}
.nav__links li a {
transition: all 0.3s ease 0s;
}
.nav__links li a:hover {
color: #fd56ed;
}
button {
padding: 9px 25px;
background-color: #79cdf6;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(0,136,169,1);
}
header img {
width: 13%;
height: 13%;
}
/*Header Ends*/
/*body begins*/
.container {
width: 90%;
margin: 50px auto;
}
.box {
margin: 30px auto 70px;
background: rgba(255,255,255,0.5);
display: flex;
position: relative;
}
.box img {
opacity: 1;
margin: 0 auto;
display: block;
}
/*body ends*/
/*footer begins*/
footer {
width: 100%;
text-align: center;
bottom: 0;
box-shadow: 0 -2px 2px -2px rgba(0,0,0,.5);
position: reflexive;
left: 0;
padding-top: 8px;
padding-bottom: 5px;
}
.nav_link_footer li a:hover {
list-style: none;
color: #fd56ed;
}
.nav_link_footer li a {
transition: all 0.3s ease 0s;
}
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="css/style.css">
<meta charset="utf-8">
</head>
<body>
<header>
<img src="images/logo.png" alt="Alt Image">
<nav>
<ul class="nav__links">
<li>Home</li>
<li>Catalog</li>
<li>Clothes</li>
<li>Corner</li>
</ul>
</nav>
<a class="cta" href="Contact.html"><button>Contact Us</button><a>
</header>
*** <div class="container">
<div class="box">
<img src="images/logo.png">
</div>
</div> ***
<footer>
<ul class="nav_link_footer">
<li><p>Marshion©</p></li>
<li>Email Us</li>
<li><p>YouTube: #Marshion!</p></li>
<li><p>Instagram: #Marshion</p></li>
<li><p>Facebook: #Marshion</p></li>
</ul>
</footer>
</body>
</html>
Try this
#box img:logo.png {
float: none;
opacity: 1;
}
Here I have a responsive navbar which I want to be absolute and menu items to float right but when I apply position property to it, menu items floats to left. Also applying absolute position to nav makes hamburger for small screen float left and when it opens the closing icon disappears.
Please help me figure out the right solution to make nav absolute but not affect the menu items and hamburger
Note: While checking code snippet try it for both desktop and mobile screen
document.getElementById("hamburger").addEventListener("click", function() {
this.classList.toggle("active");
document.querySelector(".mobile-menu").classList.toggle("active");
});
body {
background-color: rgb(0, 0, 0);
margin: 0;
overflow-x: hidden;
cursor: pointer;
}
img {
margin-top: 100px;
}
#media (max-width: 767px) {
img {
margin-top: 40px;
height: 80px;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
/* Navigation Menu */
nav {
height: 70px;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
nav #menu {
display: flex;
height: 100%;
}
nav #menu li {
padding: 0px 30px;
line-height: 70px;
transition: all 0.3s ease-out;
}
nav #menu li a {
color: #fff;
}
nav #menu li a:hover {
color: rgb(238, 215, 12);
}
#media (max-width: 767px) {
nav #menu {
display: none;
}
}
/* Mobile Menu */
#hamburger {
position: absolute;
float: right;
right: 10px;
top: 14px;
z-index: 999;
width: 40px;
height: 40px;
cursor: pointer;
transition: all 0.3s ease-out;
visibility: hidden;
opacity: 0;
}
#hamburger .line {
height: 5px;
background: rgb(238, 215, 12);
margin: 5px auto;
backface-visibility: hidden;
}
#hamburger.active #one {
transform: rotate(45deg) translateX(6px) translateY(6px);
}
#hamburger.active #two {
opacity: 0;
}
#hamburger.active #three {
transform: rotate(-45deg) translateX(10px) translateY(-12px);
}
#media (max-width: 767px) {
#hamburger {
visibility: visible;
opacity: 1;
}
}
.mobile-menu {
z-index: 1;
position: absolute;
top: 0px;
background: black;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all 0.3s ease-out;
display: table;
}
.mobile-menu .mobile-menu__items {
height: 50px;
display: table-cell;
vertical-align: middle;
}
.mobile-menu .mobile-menu__items li {
display: block;
text-align: center;
padding: 20px 0;
text-align: center;
font-size: 35px;
min-height: 50px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease-out;
}
.mobile-menu .mobile-menu__items li:hover {
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li:hover a {
transition: all 0.3s ease-out;
color: rgb(238, 215, 12);
}
.mobile-menu .mobile-menu__items li a {
color: white;
}
.mobile-menu.active {
visibility: visible;
opacity: 0.99;
}
#media (min-width: 768px) {
.mobile-menu {
visibility: hidden !important;
}
}
/* Main */
h1 {
z-index: 1;
color: #fff;
left: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>About</title>
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<!-- Navigation Menu -->
<header>
<nav>
<img src="images/logo.svg" alt="logo">
<ul id="menu">
<li>HOME</li>
<li>WORK</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
<div id="hamburger">
<div class="line" id="one"></div>
<div class="line" id="two"></div>
<div class="line" id="three"></div>
</div>
</nav>
<!-- Mobile Menu -->
<div class="mobile-menu">
<ul class="mobile-menu__items">
<li>HOME</li>
<li>WORK</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div>
</header>
<!-- Main -->
<main>
<h1>hello</h1>
</main>
</body>
</html>
add this style to your css
change menu ul li a
nav ul li a{display:block;width:100%;float:right;text-align:right;}