I'm trying to make the desktop nav hidden on mobile, but for some reason it doesn't hide until i increase the max-width to 1000px+, which shouldn't happen because all the phones I've tested on are only 400-500px wide. I can only assume it's something else in my code causing this but not sure what to change to fix it.
body {
margin: 0;
}
ul {
list-style: none;
}
.rnav {
background-color: rgb(40, 40, 44);
height: 60px;
}
.darkbg {
background-color: rgb(55, 55, 59);
}
a {
text-decoration: none;
}
.navbtn:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out;
}
.navbtn:hover:before {
visibility: visible;
transform: scaleX(1);
}
.logo {
width: 250px;
max-width: 300px;
margin-left: 20px;
transition: all ease .3s;
}
.locn {
height: 60px;
display: flex;
justify-content: flex-start;
align-items: center;
float: left;
}
.logo:hover {
transform: scale(1.05);
}
.logreg {
margin-right: 10px;
height: 60px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.logbtn {
background-color: rgb(8, 98, 182);
color: #fff;
padding: 10px 22px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 0 0 rgb(3, 66, 124);
transition: all .3s;
cursor: pointer;
}
.regbtn {
background-color: rgb(14, 138, 209);
color: #fff;
padding: 10px 24px;
margin-left: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 4px 0 0 rgb(6, 96, 148);
transition: all .3s;
cursor: pointer;
}
.logbtn:focus,.regbtn:focus {
outline: none;
}
.logbtn:active,.regbtn:active {
box-shadow: none;
transform: translateY(3px);
}
.navlist {
float: left;
}
.mnav {
display: block;
position: absolute;
right: 25px;
top: 10px;
z-index: 100;
}
#media screen and (min-width: 800px) {
.mnav {
display: none;
}
}
#media screen and (max-width: 800px) {
.rnav #myLinks {
display: none;
}
.logreg {
display: none;
}
}
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<link href="css/icon.css" rel="stylesheet">
<link href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all" rel="stylesheet">
</head>
<body class="darkbg">
<nav class="rnav">
<a href="#" class="locn">
<img src="https://cdn.discordapp.com/attachments/833803478618996756/834522746548387888/Rocrates_logo.png" class="logo">
</a>
<ul class="navlist" id="myLinks">
<li class="navbtn2">
<a>Crates</a>
</li>
<li class="navbtn">
<a>Coinflip</a>
</li>
</ul>
<div class="logreg">
<button class="logbtn"><i class="fas fa-user-friends"></i> Login</button>
<a href="/register">
<button class="regbtn"><i class="fas fa-user-plus"></i> Register</button>
</a>
</div>
<div id="nav-icon3" class="mnav">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Add this line of code into the head of your document:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Your browser is essentially creating a smaller 'zoomed out' image of your page rather than ACTUALLY resizing it. See here.
Related
I don't have an idea of how am I supposed to make the menu show with an animation. I want it to slide in down and back up on toggle. I'm down for any kind of solution.
const toggleButton = document.getElementById('toggleButton');
const naviList = document.getElementById('navi-lista');
toggleButton.addEventListener('click', () => {
naviList.classList.toggle('active');
})
* {
font-family: 'Lato', sans-serif;
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body {
background-color: #856547;
}
.rodzicnav {
position: fixed;
top: 0;
left: 0;
margin: auto;
width: 100%;
}
.navbar {
background-color: rgb(31, 31, 31);
align-items: center;
color: white;
display: flex;
justify-content: space-around;
font-size: 18px;
}
.primary-icon {
height: 30px;
}
.lista-nav {
list-style-type: none;
}
.lista-nav .elementlisty {
display: inline-block;
padding: 20px;
}
.navbar a {
color: white;
text-decoration: none;
}
.grow {
transition: all .2s ease-in-out;
}
.grow:hover {
transform: scale(1.1);
}
.menu {
display: none;
}
.menu-line {
width: 25px;
height: 3px;
background-color: white;
margin-bottom: 4px;
}
#media all and (min-width: 480px) {
.navbar {
flex-direction: column;
}
.menu {
display: block;
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
list-style-type: none;
width: 100%;
text-align: center;
padding-top: 15px;
display: none;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
display: block;
}
}
<!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">
<!-- FONT -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300&display=swap" rel="stylesheet">
<!-- -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" defer></script>
<script src="script.js" defer></script>
</head>
<body>
<div class="rodzicnav">
<nav class="navbar">
<div class="logo-kontener">
<img class="primary-icon" src="obrazy/logo.png" alt="">
</div>
<ul class="lista-nav" id="navi-lista">
<li class="elementlisty grow">
O nas
</li>
<li class="elementlisty grow">
Realizacje
</li>
<li class="elementlisty grow">
Kontakt
</li>
</ul>
<div class="menu" id="toggleButton">
<div class="menu-line"></div>
<div class="menu-line"></div>
<div class="menu-line"></div>
</div>
</nav>
</div>
</body>
</html>
I tried watching youtube tutorials, look for some anwser at freecodecamp and w3s.
I'm also kind of new to responsive website designs, so I appreciate your help.
You can try to use max-height as property to animate:
#media all and (max-width: 480px) {
.navbar {
position: relative;
padding: 10px 15px;
}
.menu {
display: block;
cursor: pointer;
}
.lista-nav .elementlisty {
display: block;
padding: 10px;
border-top: solid 1px white;
}
.lista-nav {
transition: max-height .3s;
list-style-type: none;
width: 100%;
text-align: center;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: rgb(31, 31, 31);
max-height: 0;
overflow: hidden;
}
.logo-kontener {
width: 100%;
}
.primary-icon {
margin-left: 10px;
margin-top: 10px;
}
.active {
max-height: 500px;
}
}
Basically the navbar works but before when hovering over the links the full width would get highlighted (the 100%). I have made some adjustments after that and now i cant get the links to highlight 100% when i hover over them, what am i missing?
my code:
Let me know or hint me, i have tried giving 100% width to the ul, li, the anchor, the container divs, but no luck.
html:
<!DOCTYPE html>
<html lang="en">
<head></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">
<script src="https://kit.fontawesome.com/ae0153af6c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/stylesheets/style.css" />
<link rel="stylesheet" href="/stylesheets/header.css" />
<script src="/javascripts/header.js"></script>
<title>Header</title>
</head>
<body>
<div class="navbar-flexbox" id="navbar">
<div class="hamburger">
<!-- <a href="#" class="toggle-button "> -->
<span class="bar"> </span>
<span class="bar"> </span>
<span class="bar"> </span>
<!-- </a> -->
</div>
<div id="logo">
<h1>The g<span class="title-span">oo</span>d Kitchen</h1>
</div>
<div class="search-wrapper">
<form class="search-form" action="/recipes/search" method="POST">
<div class="search-bar-container">
<label class="search-label" for="search"></label>
<input class="search-input" type="search" name="search" id="search" placeholder="What would you like to cook?">
</div>
<div class="search-icon-container">
<i class="search-icon fa-lg fa-solid fa-magnifying-glass"></i>
</div>
<div class="search-btn-container">
<input class="search-submit" type="submit" value="Search">
</div>
</form>
</div>
<div class="navigation-list-dropdown noDisplay">
<div class="navbar-links">
<ul>
<li>Upload a recipe</li>
<li>All recipes</li>
<li>Home</li>
</div>
<% if(locals.islogged) { %>
<div class="userLogged-links dropdown">
<button class="dropdown-btn">
<% if(locals.userLogged) { %>
<img class="user-image-miniature" src="../../images/userImages/<%=userLogged.image %>">
Hey user
</button>
<% } %>
<div class="dropdown-content navbar-links">
<li>My profile</li>
<li>Logout</li>
</div>
</div>
<% } else { %>
<div class="user-links dropdown navbar-links">
<li>Login</li>
<li>Register</li>
</div>
<% } %>
</ul>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
#navbar {
/* background-color: #121214; cool black option */
background-color: rgb(47, 84, 88);
position: fixed;
width: 100%;
z-index: 2;
}
.menu li {
/* font-size: 16px; */
/* padding: 15px 5px; */
white-space: nowrap;
}
/* ul {
width: 100%;
} */
/* li {
width: 100vw;
} */
.navbar-links {
width: 100% !important;
}
.navigation-list-dropdown ul {
display: flex;
flex-flow: wrap column;
width: 100%;
}
.navigation-list-dropdown ul li {
list-style: none;
}
.navigation-list-dropdown li a {
padding: 1rem;
text-decoration: none;
display: block;
font-size: 0.8rem;
}
.navigation-list-dropdown li:hover {
background-color: #555;
}
.navigation-list-dropdown li:hover a {
color: rgb(207, 181, 181);
}
.noDisplay {
display: none;
}
.noVisible {
visibility: hidden;
}
body i {
color: black;
}
/* here the hambu menu */
.hamburger {
position: absolute;
top: 0.8rem;
right: 1rem;
/* display: flex;
flex-direction: column; */
/* justify-content: space-between; */
/* height: 20px;
width: 21px; */
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg)
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg)
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
background-color: white;
}
.navbar h1 {
display: flex;
justify-content: center;
}
.title-span {
color: rgb(255, 255, 255) !important;
}
#logo h1 {
font-family: Brush Script MT !important;
position: relative;
font-size: 1.7rem;
margin: .5rem;
}
ul {
margin: 0;
}
#navbar .hambMenu,
.login-register-container i,
#logo h1 {
color: rgb(199, 176, 176);
}
.dropdown {
float: left;
overflow: initial;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-btn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
/* Important for vertical align on mobile phones */
margin: 0;
/* Important for vertical align on mobile phones */
}
.dropdown-btn {
color: white !important;
padding: 0px;
display: flex;
align-items: center;
}
.dropdown-btn>* {
padding: 0px 5px;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
.user-image-miniature {
width: 35px;
border-radius: 15px;
}
/* End of user links navbar */
.navbar-flexbox {
display: flex;
flex-direction: column;
align-items: flex-start;
height: auto;
}
/* Search bar*/
.search-input {
font-size: 0.8rem !important;
width: 100%;
height: 35px;
border: 1px solid rgb(188, 180, 180);
border-top-left-radius: 3px;
border-top-right-radius: 3px;
text-align: center;
position: relative;
}
.search-icon-container {
position: relative;
display: flex;
justify-content: flex-end;
}
.search-icon {
right: 5vw;
position: absolute;
z-index: 2;
color: rgb(139, 147, 146);
align-self: center;
}
.search-wrapper {
width: 100%;
}
.search-form {
display: flex;
justify-content: space-evenly;
}
.search-label {
display: none;
}
.search-bar-container {
width: 100%;
}
.search-btn-container {
display: none;
}
/* End of Search bar*/
#media (min-width:480px) {
li {
width: 20vw;
}
.hamburger {
display: none;
}
.navbar-flexbox {
display: flex;
justify-content: space-between;
align-items: center;
}
.navigation-list-dropdown {
display: initial;
}
.navigation-list-dropdown ul {
flex-direction: row;
justify-content: space-evenly;
}
.navigation-list-dropdown ul {
border-top: 3px solid rgb(144, 208, 221);
}
.user-links,
.userLogged-links {
display: flex !important;
border-left: 0.1px solid rgb(144, 208, 221);
}
#logo h1 {
font-size: 2rem;
}
}
/* #media (min-width: 600px) {
li {
padding: 0px 10px;
}
} */
Hey i new to this web code thing, and i need help from all of you.
I have side menu that i need to convert it to hamburger menu when the screen is small mobile sized.
I need all of this content <div id="mySidebar" class="sidebar"> to be hamburger menu on mobile scale ratio
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
You can do something like this, I guess you can do further editing to match style that you use but most of the css you can re-use. If you check snippet from below in full screen and try to resize your browser you will see how your menu switch to hamburger menu when window size becomes less than 1000px
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.sidebar {
height: 300px;
width: 180px;
position: fixed;
top: 0;
left: 10px;
background-color: white;
padding-top: 60px;
margin-top: 200px;
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 20px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 12px;
color: #858585;
display: block;
margin-top: -10px;
margin-left: -10px;
}
.sidebar a:hover {
color: #0E73B9;
}
main .sidebar {
position: absolute;
top: 0;
right: 100px;
font-size: 36px;
margin-left: 50px;
}
.material-icons,
.icon-text {
vertical-align: middle;
}
.material-icons {
margin-right: 30px
}
#main {
transition: margin-left 0.5s;
padding: 16px;
margin-left: 250px;
}
#media screen and (max-height: 450px) {
.sidebar {
padding-top: 15px;
}
.sidebar a {
font-size: 18px;
}
}
.dropdown {
position: block;
display: inline-block;
background-color: white;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 160px;
/*box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);*/
border-radius: 20px;
margin-left: 20px;
text-align: center;
height: 80px;
margin-top: -30px;
}
.dropdown-content a {
color: #858585;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top: 1px;
background-color: white;
margin-left: 5px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
background-color: white;
}
.dropdown:hover .down {
background-color: white;
}
#menuToggle {
display: block;
position: relative;
top: 50px;
left: 50px;
z-index: 1;
-webkit-user-select: none;
user-select: none;
}
#menuToggle a {
text-decoration: none;
color: #232323;
transition: color 0.3s ease;
}
#menuToggle a:hover {
color: tomato;
}
#menuToggle input {
display: block;
width: 40px;
height: 32px;
position: absolute;
top: -7px;
left: -5px;
cursor: pointer;
opacity: 0;
/* hide this */
z-index: 2;
/* and place it over the hamburger */
-webkit-touch-callout: none;
}
/*
* Just a quick hamburger
*/
#menuToggle span {
display: block;
width: 33px;
height: 4px;
margin-bottom: 5px;
position: relative;
background: #cdcdcd;
border-radius: 3px;
z-index: 1;
transform-origin: 4px 0px;
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), opacity 0.55s ease;
}
#menuToggle span:first-child {
transform-origin: 0% 0%;
}
#menuToggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
/*
* Transform all the slices of hamburger
* into a crossmark.
*/
#menuToggle input:checked~span {
opacity: 1;
transform: rotate(45deg) translate(-2px, -1px);
background: #232323;
}
/*
* But let's hide the middle one.
*/
#menuToggle input:checked~span:nth-last-child(3) {
opacity: 0;
transform: rotate(0deg) scale(0.2, 0.2);
}
/*
* Ohyeah and the last one should go the other direction
*/
#menuToggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
/*
* Make this absolute positioned
* at the top left of the screen
*/
#menu {
position: absolute;
width: 300px;
margin: -100px 0 0 -50px;
padding: 50px;
padding-top: 125px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
/* to stop flickering of text in safari */
transform-origin: 0% 0%;
transform: translate(-100%, 0);
transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}
#menu li {
padding: 10px 0;
font-size: 22px;
display: flex;
align-items: center;
}
nav {
display: none;
}
/*
* And let's slide it in from the left
*/
#menuToggle input:checked~ul {
transform: none;
}
#media screen and (max-width: 1000px) {
.sidebar {
display: none;
}
nav {
display: block;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<nav role="navigation">
<div id="menuToggle">
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input type="checkbox" />
<!--
Some spans to act as a hamburger.
They are acting like a real hamburger,
not that McDonalds stuff.
-->
<span></span>
<span></span>
<span></span>
<!--
Too bad the menu has to be inside of the button
but hey, it's pure CSS magic.
-->
<ul id="menu">
<a href="#">
<li><i class="material-icons">home</i>Dashboard</li>
</a>
<a href="#">
<li><i class="material-icons">info</i>Monitoring</li>
</a>
<a href="#">
<li><i class="material-icons">settings</i>Settings</li>
</a>
<a href="#">
<li><i class="material-icons">logout</i>Logout</li>
</a>
</ul>
</div>
</nav>
<div id="mySidebar" class="sidebar">
<span><i class="material-icons">home</i><span class="icon-text">Dashboard</span><br>
<div class="dropdown">
<div class="down">
<i class="material-icons">info</i><span class="icon-text"></span>Monitoring</span>
</a><br>
</div>
<div class="dropdown-content">
Reader
RFID
</div>
</div>
<i class="material-icons">settings</i><span class="icon-text"></span>Settings</span><br>
<i class="material-icons">logout</i><span class="icon-text"></span>Logout<span>
</div>
</body>
</html>
I've made a lot of progress on my site, but the problem is that my burger menu doesn't show up, does anyone have an idea what's causing this please?
I tried different things, debugging and so on but I can't make it appear again -_-
So if anyone knows why, and has explanations I'm a taker I'm completely lost I know what to do lol
And then if you have other constructive criticism on my code of course I'm a taker thank you in advance for giving me your time
$('.m-nav-toggle').click(function(e) {
e.preventDefault();
$('.m-right').toggleClass('is-open');
$('m-nav-toggle').toggleClass('is-open');
})
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,900;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
.menu {
background: #757de8;
width: 100%;
height: 66px;
line-height: 66px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.m-left {
float: left;
}
.logo {
margin: 0;
padding: 0;
}
.m-right {
float: right;
}
.m-links {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 0;
margin: 0 15px;
font-family: 'Lato', sans-serif;
transition: all 0.3s ease-in-out;
border-bottom: 2px solid transparent;
padding-bottom: 3px;
}
.m-links:hover {
border-color: #fff;
}
.m-links i {
margin-right: 5px;
}
.m-nav-toggle {
width: 40px;
height: 66px;
display: none;
align-items: center;
float: right;
cursor: pointer;
}
span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff;
position: relative;
transition: all 0.3s ease-in-out;
}
span.m-toggle-icon:before {
top: 12px;
}
span.m-toggle-icon:after {
top: -14px;
}
.m-right.is-open {
transform: translateX(0);
}
.m-nav-toggle.is-open span.m-toggle-icon {
background: transparent;
}
.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
transform-origin: center;
transform: rotate(45deg);
top: 0;
}
#media only screen and (max-width: 950px) {
.m-right {
position: absolute;
top: 66px;
right: 0;
width: 200px;
height: 100%;
background: #757de8;
transform: translateX(100%);
transition: all 0.3s ease-in-out;
}
.m-links {
display: block;
text-align: center;
padding: 0;
margin: 0 20px;
height: 55px;
}
.m-nav-toggle.is-open span.m-toggle-icon:before {
transform: rotate(-45deg);
}
.m-nav-toggle {
display: flex;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>
<header role="header">
<nav class="menu" role="navigation">
<div class="inner">
<img class="fit-picture" src="img/logo.svga">
<div class="m-left"></div>
<div class="m-right">
<i class="fas fa-home"></i> Home
<i class="fas fa-book"></i> Documentation
<i class="fas fa-comments"></i> Feedback
<i class="fas fa-handshake"></i> Partners
<i class="fas fa-envelope"></i> Contact
</div>
<div class="m-nav-toggle">
<span class="m-toggle-icon"></span>
</div>
</div>
</nav>
</header>
File : normalize.css :
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
.inner {
width: 80%;
margin: auto;
}
enter code here
The "m-toggle-icon" class needs "width:100%" and it will be shown. This is because its parent has "display: flex".
Working example:
$('.m-nav-toggle').click(function(e) {
e.preventDefault();
$('.m-right').toggleClass('is-open');
$('m-nav-toggle').toggleClass('is-open');
})
#import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;0,900;1,700&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
.menu {
background: #757de8;
width: 100%;
height: 66px;
line-height: 66px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}
.m-left {
float: left;
}
.logo {
margin: 0;
padding: 0;
}
.m-right {
float: right;
}
.m-links {
text-decoration: none;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 0;
margin: 0 15px;
font-family: 'Lato', sans-serif;
transition: all 0.3s ease-in-out;
border-bottom: 2px solid transparent;
padding-bottom: 3px;
}
.m-links:hover {
border-color: #fff;
}
.m-links i {
margin-right: 5px;
}
.m-nav-toggle {
width: 40px;
height: 66px;
display: none;
align-items: center;
float: right;
cursor: pointer;
}
span.m-nav-toggle-icon,
span.m-toggle-icon:before,
span.m-toggle-icon:after {
content: "";
display: block;
width: 100%;
height: 3px;
background: #fff;
position: relative;
transition: all 0.3s ease-in-out;
}
span.m-toggle-icon:before {
top: 12px;
}
span.m-toggle-icon:after {
top: -14px;
}
.m-right.is-open {
transform: translateX(0);
}
.m-nav-toggle.is-open span.m-toggle-icon {
background: transparent;
}
.m-nav-toggle.is-open span.m-toggle-icon:before, .m-nav-toggle.is-open span.m-toggle-icon:after {
transform-origin: center;
transform: rotate(45deg);
top: 0;
}
#media only screen and (max-width: 950px) {
.m-right {
position: absolute;
top: 66px;
right: 0;
width: 200px;
height: 100%;
background: #757de8;
transform: translateX(100%);
transition: all 0.3s ease-in-out;
}
.m-links {
display: block;
text-align: center;
padding: 0;
margin: 0 20px;
height: 55px;
}
.m-nav-toggle.is-open span.m-toggle-icon:before {
transform: rotate(-45deg);
}
.m-nav-toggle {
display: flex;
}
}
.m-toggle-icon {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="https://kit.fontawesome.com/8b1b202200.js" crossorigin="anonymous"></script>
<header role="header">
<nav class="menu" role="navigation">
<div class="inner">
<img class="fit-picture" src="img/logo.svga">
<div class="m-left"></div>
<div class="m-right">
<i class="fas fa-home"></i> Home
<i class="fas fa-book"></i> Documentation
<i class="fas fa-comments"></i> Feedback
<i class="fas fa-handshake"></i> Partners
<i class="fas fa-envelope"></i> Contact
</div>
<div class="m-nav-toggle">
<span class="m-toggle-icon"></span>
</div>
</div>
</nav>
</header>
/* 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>