I'm relatively new to coding and I've been trying to make a responsive multi-list dropdown navbar. I have made the navbar using HTML and CSS however it isn't very responsive when I change the screen size.
I don't want to use bootstrap. and I am aiming hamburger which compresses the buttons into a single column and then expands when I click on a button to show the sub-links. I believe media queries would be possible but I'm not sure how to approach this.
Any help would be appreciated.
HTML / CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
h1 {
font-family: 'Alfa Slab One', cursive;
letter-spacing: 5px
}
a {
font-family: 'Permanent Marker', cursive;
color: #FF8240;
}
#nav {
border-bottom: 2px solid red;
background-color: #FF8240
}
.dropdown-toggle {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: auto;
}
.dropdown-toggle {
position: relative;
}
.dropdown-toggle ul {
position: absolute;
background: White;
margin-top: 10px;
width: 150px;
height: 90px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all 0.4s ease;
}
.dropdown-toggle a {
text-decoration: none;
}
.dropdown-toggle button,
.home {
background: none;
border: none;
color: rgb(196, 19, 19);
font-size: 18px;
font-family: 'Permanent Marker', cursive;
cursor: pointer;
}
.dropdown-toggle button:hover,
.home:hover {
color: #FFF940
}
.DropdownList :hover {
color: rgb(196, 19, 19);
}
.DropdownList button:focus+ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hungry Burger Company</title>
<link rel="stylesheet" href="CSS/HBCStyleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Permanent+Marker|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<!-- Main Container-->
<header id="nav">
<nav>
<div class="dropdown-toggle">
<h1 class="Logo">HBC</h1>
<button>Home</a></button>
<div class="DropdownList" id="About Us">
<button>About Us</button>
<ul>
<li>Who We Are</li>
<li>What we do</li>
</ul>
</div>
<div class="DropdownList" id="menu">
<button>Menu</button>
<ul>
<li>Off The Menu</li>
<li>Build a Burger</li>
</ul>
</div>
<div class="DropdownList" id="Coms">
<button>Contact Us</button>
<ul>
<li>Join Us</li>
<li>Find Us</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="Javascript/HBC.js"></script>
</body>
</html>
Okay, If I understood what you mean exactly. Here is the code that does what you want you can test it with this link:
https://www.w3schools.com/code/tryit.asp?filename=G24ZV5OQJ8EB
Or You can click here directly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hungry Burger Company</title>
<link rel="stylesheet" href="CSS/HBCStyleSheet.css">
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Permanent+Marker|Roboto+Slab:400,700" rel="stylesheet">
</head>
<body>
<!-- Main Container-->
<header id="nav">
<nav style="width:100%;">
<div class="dropdown-toggle">
<h1 class="Logo">HBC</h1>
<button id="cc">Home</a></button>
<div class="DropdownList" id="cc">
<button>About Us</button>
<ul>
<li>Who We Are</li>
<li>What we do</li>
</ul>
</div>
<div class="DropdownList" id="cc">
<button>Menu</button>
<ul>
<li>Off The Menu</li>
<li>Build a Burger</li>
</ul>
</div>
<div class="DropdownList" id="cc">
<button>Contact Us</button>
<ul id="cc">
<li>Join Us</li>
<li>Find Us</li>
</ul>
</div>
</div>
<button class="openbtn" onclick="openNav()">☰</button>
</nav>
</header>
<script src="Javascript/HBC.js"></script>
</body>
<style>
#cc{
display:block;
}
.sidebar{
display:none;
}
#mySidebar{
display:none;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
}
h1{
font-family: 'Alfa Slab One', cursive;
letter-spacing: 5px
}
a{
font-family: 'Permanent Marker', cursive;
color:#FF8240;
}
#nav {
border-bottom: 2px solid red;
background-color: #FF8240;
position:absolute;
left:0px;
top:0px;
}
.dropdown-toggle {
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
width: 95%;
margin: auto;
}
.dropdown-toggle {
position: relative;
}
.dropdown-toggle ul{
position: absolute;
background: White;
margin-top: 10px;
width: 150px;
height: 90px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
list-style: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
opacity: 0;
pointer-events: none;
transform: translateY(10px);
transition: all 0.4s ease;
}
.dropdown-toggle a {
text-decoration: none;
}
.dropdown-toggle button,
.home {
background: none;
border: none;
color: rgb(196, 19, 19);
font-size: 18px;
font-family: 'Permanent Marker', cursive;
cursor: pointer;
}
.dropdown-toggle button:hover,
.home:hover {
color: #FFF940
}
.DropdownList :hover {
color: rgb(196, 19, 19);
}
.DropdownList button:focus + ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px)
}
#nav{
width:100%;
}
.openbtn {
display:none;
}
#media only screen and (max-width: 600px) {
body {
font-family: "Lato", sans-serif;
}
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: orange;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
display:block;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
color: #f1f1f1;
}
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.openbtn {
font-size: 20px;
cursor: pointer;
background-color: #111;
color: white;
padding: 10px 15px;
border: none;
display:block;
}
.openbtn:hover {
background-color: #444;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
#mySidebar{
display:block;
}
#nav{
display:block;
}
#cc{
display:none;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
×
Home <br>
About Us<br>
Who We Are<br>
What we do<br>
<div id="main">
</div>
<script>
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
</script>
Related
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
I am a beginner and I am learning HTML and CSS. I am trying to make a webpage but the menu of the webpage is not working fully.
There is another menu in the main menu like the nested menu (I actually don't know what it is called). The first menu is working perfectly but the nested menu is not working. I want, if I click on the Menu option, which is indicated in the image, the second menu appears over the first menu.
The red mark on the image is the link to the second menu.
My menu will be like Starbucks menu which appears when the width is 768px.
My Codes:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#menu:checked ~ .sidebarMenu, .nested-menu a #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu, .menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul, .menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li, .menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li a, .menu-2 ul li a {
color: #000;
font-size: 24px;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1E3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="">
</div>
</div>
<input type="checkbox" id="menu">
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<a href="#">
<input type="checkbox" id="nested">
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
</a>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr>
<li class="btn-list">
Sign in
Join now
</li>
<li class="location"><i class="fas fa-map-marker-alt"></i> Find a store</li>
</ul>
</div>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</div>
</body>
</html>
Why it is not working?
How can I fix the issue and what is the solution?
Place .menu-2 with the next item after <input type="checkbox" id="nested" />.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
overflow-x: hidden;
height: 100%;
}
.header {
background-color: #fff;
width: 100%;
height: 83px;
position: fixed;
z-index: 10;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.header {
display: flex;
align-items: center;
}
.header .logo {
padding-left: 2rem;
}
.header .logo img {
width: 50px;
}
.toogle-menu {
width: 25px;
height: 25px;
position: absolute;
top: 25px;
right: 2rem;
z-index: 20;
cursor: pointer;
}
.spinner {
background-color: #000;
height: 3px;
margin: 5px 0;
transition: all 0.3s ease;
}
#menu:checked ~ .toogle-menu > .spinner.middle {
opacity: 0;
}
#menu:checked ~ .toogle-menu > .spinner.top {
transform: rotate(135deg);
margin-top: 15px;
}
#menu:checked ~ .toogle-menu > .spinner.bottom {
transform: rotate(-135deg);
margin-top: -16px;
}
#nested {
display: none;
}
#menu:checked ~ .sidebarMenu,
.nested-menu #nested:checked ~ .menu-2 {
transform: translateX(0);
}
.sidebarMenu,
.menu-2 {
height: 100%;
width: 80vw;
margin-top: 83px;
position: fixed;
top: 0;
right: 0;
background-color: #fff;
border-left: 1px solid rgb(235, 227, 227);
transform: translateX(80vw);
transition: all 0.3s ease;
}
.sidebarMenu ul,
.menu-2 ul {
padding: 1rem 2rem 3rem 2rem;
}
.sidebarMenu ul li,
.menu-2 ul li {
margin-bottom: 2rem;
}
.sidebarMenu ul li > *,
.menu-2 ul li a {
color: #000;
font-size: 24px;
cursor: pointer;
}
.nested-menu a label {
display: flex;
justify-content: space-between;
font-size: 24px;
cursor: pointer;
}
.nested-menu a input {
visibility: hidden;
}
.btn-list {
margin-top: 2rem;
}
.btn {
padding: 7px 16px !important;
border: 1px solid #000 !important;
font-size: 16px !important;
border-radius: 30px !important;
color: #1e3932 !important;
font-weight: 500 !important;
}
.btn-black {
background-color: #000 !important;
color: #fff !important;
margin-left: 1rem;
}
<!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>Hamburger Menu</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous" />
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="mobile-menu">
<div class="header">
<div class="logo">
<img src="./starbucks-logo.png" alt="" />
</div>
</div>
<input type="checkbox" id="menu" />
<label for="menu" class="toogle-menu">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom"></div>
</label>
<div class="sidebarMenu">
<ul>
<li class="nested-menu">
<input type="checkbox" id="nested" />
<label for="nested">Menu <i class="fas fa-chevron-right"></i></label>
<div class="menu-2">
<ul>
<li>All Orders</li>
<li>Featured</li>
<li>Previous Orders</li>
<li>Favorite Products</li>
</ul>
</div>
</li>
<li>Rewards</li>
<li>Gift Cards</li>
<hr />
<li class="btn-list">
Sign in
Join now
</li>
<li class="location">
<i class="fas fa-map-marker-alt"></i> Find a store
</li>
</ul>
</div>
</div>
</body>
</html>
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase-img img:hover {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
// When i hover over the showcase-img container the opacity changes but when the mouse goes over the ul which contains 2 li's that are icons the hovering stops and the opacity resets which shouldn't happen, i want the opacity to stay at 0.7 while the mouse is in the showcase-img container, how can i fix this? Thanks!
Rather than applying :hover directly on image like this .showcase-img img:hover img{} apply it directly on parent div it means .showcase:hover img{}. This should be something like this:
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.nav i {
margin-right: 0.3rem;
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.02rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, .nav i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
border: none;
}
.showcase-img {
width: 960px;
height: 470px;
border-radius: 2px;
border: 2px solid black;
box-shadow: 3px 3px 15px hsl(250, 100%, 41%);
}
.showcase-img img {
width: 100%;
height: 100%;
}
.showcase:hover img {
background-color: dodgerblue; /* testing */
transition: all 0.2s ease-in-out;
opacity: 0.7;
}
.showcase ul {
display: flex;
bottom: 15.6rem;
position: relative;
justify-content: space-between;
width: 85%;
}
.showcase ul li {
color: black;
font-size: 2.5rem;
}
.showcase ul li i:hover {
transition: all 150ms ease-in-out;
font-size: 2.7rem;
color: var(--nav-hue);
cursor: pointer;
}
.showcase ul li i:active {
transition: all 50ms ease-in-out;
transform: translateY(0.2rem);
font-size: 2.9rem;
color: white;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.column {
flex-direction: column;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img id="image" src="images/arma3.png" alt="">
</div>
<ul>
<li class="left-flash"><i id="left-flash" class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i id="right-flash" class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
I want "THE NAV" to be displayed in the center of the navbar for mobile view and want the hamburger menu icon on the far right side.
how do i do this?
I tried .logo justify-content: center but nothing changed
If anyone would care to explain this to me I would be super grateful, I have tried finding a solution myself by using google but as I'm quite new to this I haven't been able to find a fix for my problem because I'm really not sure what to search for to fix my problem
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}
.nav-active {
transform: translateX(0%);
}
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
So thing is: Display Flex distributes space between divs evenly. This means your logo and your burger bove geht the same space and justify-content then placees them next to each other with 50% width.
What you need to do is: Take the burger out of the equation for the flexbox. You can do this by placing it absolute (with position: absolute) and then you just have to tell it a right-value of e.g. 40px
//CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #5d4954;
font-family: "Poppins", sans-serif;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5d4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.4s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
position: absolute;
right: 40px;
}
}
.nav-active {
transform: translateX(0%);
}
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="nav.css" />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap"
rel="stylesheet"
/>
<title>NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Projects</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="nav.js"></script>
</body>
</html>