Creating a CSS hover style that doesn't jump - html

I made a mobile responsive hamburger menu to horizontal nav bar, but I'm having trouble making a hover style for the links on the horizontal nav bar that don't make them jump. If you look at my Codpen you'll see the general style I want on those links on hover, but I want that highlight to be larger around the wording. When I've tried to do this the links end up jumping on hover. The other thing is that I can't get the top highlight much bigger... it's like it's cut off with some other property. This is the first menu like this I've made (I'm fairly new) so I played around with a lot of different CSS properties and values to get things to look perfect upon first glance and I'm sure some CSS isn't right, I just don't know what or where. I pasted the code below with everything inline but definitely check out the codpen because that's more accurate to how it looks on my computer. Thanks for your help!
http://codepen.io/sshine2/pen/VbjGaE
EDIT: I edited the code in Codepen to show how the top of the highlight gets cut off and the link jumps when the highlight is the size I want it to be.
SECOND EDIT: Fixed the top being cut off myself. Changed where the entire menu was displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block!important;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: .4em;
padding-right: 0em;
padding-left: 0em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>


The jumping issue is because you add padding on hover which isn't there before.
Before your media queries define the padding ones:
.menu li {
border-bottom: 0;
border-top: 0;
padding: 1em;
}
Then remove the defined paddings for .menu li in your min 768px query.,
code pen

Related

The navbar responsive issue when I resize the browser width

The Burger bar animation & nav tag doesn't work when I resize the browser width. But when I refresh the page it shows and works. So I need to refresh the page every time when I resize the window width to make it work.
I code with Bootstrap v5.2 and jQuery.I have struggled with this problem for a while. Please help me up.
Many Thanks.
/*navigation icon animation*/
let trigger = 'X';
jQuery(document).ready(function() {
$('#toggle-menu').click(function() {
trigger = 'X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function() {
if (trigger == 'X') {
$("#toggle-menu").toggleClass();
trigger = 'ham';
}
});
$("nav").click(function(e) {
e.stopPropagation();
return false;
});
});
/*toggle Nav menu Background up & down*/
if ($(window).width() <= 768) {
$('#toggle-menu').on('click', function() {
if ($('.nav').is(':visible')) {
$('.nav').animate({
height: '0'
}, function() {
$(this).hide();
});
} else {
$('.nav').show();
$('.nav').animate({
height: '180'
});
}
});
}
/* Click outside of nav to close Toggle*/
if ($(window).width() <= 768) {
$(document).click(function() {
$(".nav").hide();
});
$("#toggle-menu").click(function(e) {
e.stopPropagation();
return false;
});
}
/*-- Nav Bar --*/
header a {
color: #ffffff;
text-decoration: none;
}
header a:focus,
a:hover {
color: #a7a7a7;
}
header a:active {
color: #b8b8b8;
}
header {
display: flex;
height: 40px;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
position: relative;
z-index: 2;
}
.logo {
float: left;
cursor: pointer;
text-decoration: none;
}
.nav {
float: right;
}
.nav>li {
display: inline-block;
padding-right: 20px;
font-size: 0.9rem;
}
.nav>li:last-child {
padding-right: 10px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
text-decoration: none;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1.5px;
bottom: -3px;
left: 0;
background-color: #f0bc1f;
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.language {
text-decoration: none;
color: #ffffff;
}
.header-divider {
position: absolute;
border-top: 1.5px solid white;
width: 50%;
z-index: 2;
right: 0px;
top: 25px;
opacity: 0.3;
}
#media (max-width: 768px) {
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #d3d3d33f;
left: 0px;
top: 39px;
}
.nav li:hover {
background-color: #f0bc1f;
transition: ease-in-out;
}
.nav li a:hover {
color: #000000;
}
.nav>li {
display: block;
float: center;
padding: 8px 0px;
}
.nav>li:last-child {
border-bottom: none;
}
.hover-underline-animation {
display: block;
position: relative;
color: white;
text-decoration: none;
}
.hover-underline-animation:hover {
background-color: #f0bc1f;
}
.hover-underline-animation:after {
content: '';
position: absolute;
display: none;
}
/*--- logo ---*/
.logo {
float: left;
display: block;
cursor: pointer;
}
/*--- Navigation Burger Menu ---*/
#toggle-menu {
float: right;
display: block;
cursor: pointer;
margin-right: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu .bar {
padding: 0;
width: 25px;
height: 3px;
background-color: rgb(255, 255, 255);
display: block;
border-radius: 3px;
transition: all 0.4s ease-in-out;
position: absolute;
}
#toggle-menu span.bar1 {
top: 0px;
}
#toggle-menu span.bar2,
.bar3 {
top: 8px;
}
#toggle-menu span.bar4 {
top: 16px;
}
/*--- Burger Menu Animation---*/
#toggle-menu.menu-is-active .bar {
padding: 0;
width: 25px;
height: 3px;
background-color: rgb(255, 255, 255);
display: block;
border-radius: 3px;
transition: all 0.4s ease-in-out;
position: absolute;
}
#toggle-menu.menu-is-active span.bar1 {
top: 0px;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
background-color: transparent;
}
#toggle-menu.menu-is-active span.bar4 {
top: 16px;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
background-color: transparent;
}
#toggle-menu.menu-is-active span.bar2 {
top: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.bar3 {
top: 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
<header class="container-fluid bg-dark">
CCH
<a id="toggle-menu">
<div id="barcontainer">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Service</li>
<li>Contact</li>
<li>Career</li>
<li>中文/En</li>
</ul>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

The issue with your current code is because you only check the window widths when the page loads, not when it resizes.
That being said you can make the code much more simple by toggling a class on the button. You can then use CSS transitions to animate the state of the menu based on the #media rules.
The only thing that's required in JS to make this work is to remove the class from the burger when the screen resizes in order to hide the menu once more.
jQuery($ => {
$('#toggle-menu').on('click', e => {
$(e.currentTarget).toggleClass('menu-is-active')
});
});
$(window).on('resize', () => {
$('#toggle-menu').removeClass('menu-is-active');
});
body {
background-color: #333;
}
header a {
color: #ffffff;
text-decoration: none;
}
header a:focus,
a:hover {
color: #a7a7a7;
}
header a:active {
color: #b8b8b8;
}
header {
display: flex;
height: 40px;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
position: relative;
z-index: 2;
}
.logo {
float: left;
cursor: pointer;
text-decoration: none;
}
.nav {
float: right;
}
.nav.show {
display: block;
}
.nav>li {
display: inline-block;
padding-right: 20px;
font-size: 0.9rem;
}
.nav>li:last-child {
padding-right: 10px;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
text-decoration: none;
}
.hover-underline-animation:after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1.5px;
bottom: -3px;
left: 0;
background-color: #f0bc1f;
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
.hover-underline-animation:hover:after {
transform: scaleX(1);
transform-origin: bottom left;
}
.language {
text-decoration: none;
color: #ffffff;
}
.header-divider {
position: absolute;
border-top: 1.5px solid white;
width: 50%;
z-index: 2;
right: 0px;
top: 25px;
opacity: 0.3;
}
#media (max-width: 768px) {
.nav {
position: fixed;
width: 100%;
text-align: center;
opacity: 0;
background-color: #d3d3d33f;
left: 0px;
top: 39px;
height: 0;
transition: height 0.25s, opacity 0.25s;
}
#toggle-menu.menu-is-active + ul.nav {
opacity: 1;
height: 200px;
}
.nav li:hover {
background-color: #f0bc1f;
transition: ease-in-out;
}
.nav li a:hover {
color: #000000;
}
.nav>li {
display: block;
float: center;
padding: 8px 0px;
}
.nav>li:last-child {
border-bottom: none;
}
.hover-underline-animation {
display: block;
position: relative;
color: white;
text-decoration: none;
}
.hover-underline-animation:hover {
background-color: #f0bc1f;
}
.hover-underline-animation:after {
content: '';
position: absolute;
display: none;
}
/*--- logo ---*/
.logo {
float: left;
display: block;
cursor: pointer;
}
/*--- Navigation Burger Menu ---*/
#toggle-menu {
float: right;
display: block;
cursor: pointer;
margin-right: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu .bar {
padding: 0;
width: 25px;
height: 3px;
background-color: rgb(255, 255, 255);
display: block;
border-radius: 3px;
transition: all 0.4s ease-in-out;
position: absolute;
}
#toggle-menu span.bar1 {
top: 0px;
}
#toggle-menu span.bar2,
.bar3 {
top: 8px;
}
#toggle-menu span.bar4 {
top: 16px;
}
/*--- Burger Menu Animation---*/
#toggle-menu.menu-is-active .bar {
padding: 0;
width: 25px;
height: 3px;
background-color: rgb(255, 255, 255);
display: block;
border-radius: 3px;
transition: all 0.4s ease-in-out;
position: absolute;
}
#toggle-menu.menu-is-active span.bar1 {
top: 0px;
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
background-color: transparent;
}
#toggle-menu.menu-is-active span.bar4 {
top: 16px;
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
background-color: transparent;
}
#toggle-menu.menu-is-active span.bar2 {
top: 8px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.bar3 {
top: 8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
<header class="container-fluid bg-dark">
CCH
<a id="toggle-menu">
<div id="barcontainer">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar3"></span>
<span class="bar bar4"></span>
</div>
</a>
<ul class="nav">
<li>Home</li>
<li>About us</li>
<li>Service</li>
<li>Contact</li>
<li>Career</li>
<li>中文/En</li>
</ul>
</header>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Here's a working example in jsFiddle - it's easier to see the resize logic working here as you can drag the frames.

how can I position the image at the left of the div inside my header?

so here is my problem. I have managed to put the image which is the logo at the left hand side of the header for both tablet and mobile version, however when I display it in the desktop version the logo is the left but not in the corner like I want it. I tried putting a right margin to it, but I think there is a better way to do it instead of doing that. the same thing happens with my ul list. it's in the right corner on both tablet and mobile but it is not in the desktop version. this is my code:
<!DOCTYPE html>
<html>
<link href='https://fonts.googleapis.com/css?family=Montserrat|Cardo' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.main_h {
position: fixed;
top: 0px;
max-height: 70px;
z-index: 999;
width: 100%;
padding-top: 17px;
background: none;
overflow: hidden;
-webkit-transition: all 0.3s;
transition: all 0.3s;
opacity: 0;
top: -100px;
padding-bottom: 6px;
font-family: "Montserrat", sans-serif;
}
#media only screen and (max-width: 766px) {
.main_h {
padding-top: 25px;
}
}
.open-nav {
max-height: 400px !important;
}
.open-nav .mobile-toggle {
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.sticky {
background-color: rgba(255, 255, 255, 0.93);
opacity: 1;
top: 0px;
border-bottom: 1px solid gainsboro;
}
.logo {
width: 150px;
font-size: 25px;
color: #8f8f8f;
text-transform: uppercase;
float: left;
display: block;
margin-top: 0;
line-height: 1;
margin-bottom: 10px;
}
#media only screen and (max-width: 766px) {
.logo {
float: none;
}
}
nav {
float: right;
width: 60%;
}
#media only screen and (max-width: 766px) {
nav {
width: 100%;
}
}
nav ul {
list-style: none;
overflow: hidden;
text-align: center;
float: right;
}
#media only screen and (max-width: 766px) {
nav ul {
padding-top: 10px;
margin-bottom: 22px;
float: left;
text-align: center;
width: 100%;
}
}
nav ul li {
display: inline-block;
margin-left: 35px;
line-height: 1.5;
text-align: center;
}
#media only screen and (max-width: 766px) {
nav ul li {
width: 100%;
padding: 7px 0;
margin: 0;
text-align: center;
}
}
nav ul a {
color: #000;
text-transform: uppercase;
font-size: 12px;
text-align: center;
}
.mobile-toggle {
display: none;
cursor: pointer;
font-size: 20px;
position: absolute;
right: 22px;
top: 0;
width: 30px;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
#media only screen and (max-width: 766px) {
.mobile-toggle {
display: block;
}
}
.mobile-toggle span {
width: 30px;
height: 4px;
margin-bottom: 6px;
border-radius: 1000px;
background: #8f8f8f;
display: block;
}
.row {
width: 100%;
max-width: 940px;
margin: 0 auto;
position: relative;
padding: 0 2%;
}
* {
box-sizing: border-box;
}
body {
color: #8f8f8f;
background: white;
font-family: "Cardo", serif;
font-weight: 300;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
}
h1 {
font-size: 30px;
line-height: 1.8;
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
}
p {
margin-bottom: 20px;
font-size: 17px;
line-height: 2;
}
.content {
padding: 50px 2% 250px;
}
.hero {
position: relative;
background: url(http://www.philippefercha.com/cd/toggle-menu-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
text-align: center;
color: #fff;
padding-top: 110px;
min-height: 500px;
letter-spacing: 2px;
font-family: "Montserrat", sans-serif;
}
.hero h1 {
font-size: 50px;
line-height: 1.3;
}
.hero h1 span {
font-size: 25px;
color: #e8f380;
border-bottom: 2px solid #e8f380;
padding-bottom: 12px;
line-height: 3;
}
.mouse {
display: block;
margin: 0 auto;
width: 26px;
height: 46px;
border-radius: 13px;
border: 2px solid #e8f380;
position: absolute;
bottom: 40px;
position: absolute;
left: 50%;
margin-left: -26px;
}
.mouse span {
display: block;
margin: 6px auto;
width: 2px;
height: 2px;
border-radius: 4px;
background: #e8f380;
border: 1px solid transparent;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: scroll;
animation-name: scroll;
}
#-webkit-keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
}
#keyframes scroll {
0% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
}
</style>
<body>
<header class="main_h">
<div class="row">
<img src = "logo.png" class="logo" href="#"></a>
<div class="mobile-toggle">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>Home</li>
<li>Abous Us</li>
<li>Contact Us</li>
</ul>
</nav>
</div> <!-- / row -->
</header>
<script>
// Sticky Header
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});
// Mobile Navigation
$('.mobile-toggle').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.main_h').removeClass('open-nav');
} else {
$('.main_h').addClass('open-nav');
}
});
$('.main_h li a').click(function() {
if ($('.main_h').hasClass('open-nav')) {
$('.navigation').removeClass('open-nav');
$('.main_h').removeClass('open-nav');
}
});
// navigation scroll lijepo radi materem
$('nav a').click(function(event) {
var id = $(this).attr("href");
var offset = 70;
var target = $(id).offset().top - offset;
$('html, body').animate({
scrollTop: target
}, 500);
event.preventDefault();
});
</script>
</body>
</html>

sorry to tell you that but I don't like your CSS, and opacity 0 on the entire page? float everywhere, I don't get it ^^ first of all try to put CSS in a CSS file and JS in a JS file
I did not understand what the span things were for, I removed them for the structure
now for the code
I can recommend using a structure, would be easier
something like this:
HTML:
body{
padding: 0;
margin: 0;
}
.col1x3{
width: 33%;
}
.col1x2{
width: 50%;
}
.element{
margin-right: -0.25em;
display: inline-block;
}
<div class="row">
<div class="container">
<div class="element col1x2">
<img src = "https://www.magknit.co.uk/staging/1365/wp-content/uploads/2020/10/descarga-1-1.png" class="logo" href="#"></a>
</div>
<div class="element col1x2">
<nav>
<ul>
<li class="element col1x3">Home</li>
<li class="element col1x3">Abous Us</li>
<li class="element col1x3">Contact Us</li>
</ul>
</nav>
</div>
</div>
</div>

I found out it is the max-width in the .row that is causing the problem. i had it set up to 960px so the row would not be longer than that. I just had to set it to whatever screen size I wanted and that is it.

Why can I click the li when the navbar isn't showed?

Ok so I have a problem with my navbar on mobile. It is hidden and it displays only when I press the bar (toggler). The problem is: if I press on the screen when the navbar isn't displayed it still goes to the links, even if I can't see the li's.
I want to keep the same navbar but I don't want to acces the links when it is closed.
If its possible please tell me how to solve it and the problems of my navbar
This is my code:
.banner {
margin: 0px;
position: relative;
width: 100%;
height: 100vh;
background-size: cover;
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6)), url(../img/pozabackground-home2.jpg);
background-position: center;
box-shadow: 1px 2px 4px 0px #00000075 !important;
background-attachment: fixed;
}
.navigatie {
background-color: transparent;
width: 100%;
position: fixed;
z-index: 99;
margin: 0px;
padding: 0px;
}
.logo {
float: left;
padding: 8px;
margin-left: 40px;
margin-top: 8px;
}
.navbar-brand {
color: white !important;
}
.navbar-brand img {
width: auto;
height: 100px;
margin: -32px 0px -25px 0px;
}
nav ul {
float: right;
list-style-type: none;
padding-top: 5px;
margin-right: 20px;
}
nav ul li {
float: left;
}
nav ul li:not(:first-child) {
margin-left: 48px;
}
nav ul li:last-child {
margin-right: 24px;
}
nav ul li a {
display: inline-block;
outline: none;
color: #fff;
text-transform: uppercase;
text-decoration: none;
font-size: 13px;
letter-spacing: 1.1px;
font-weight: 600;
}
nav ul li a:hover {
color: #fff;
text-decoration: underline;
}
/* FUNDAL JS */
.fundal {
background: #104f47 !important;
box-shadow: 1px 2px 4px 0px #00000075 !important;
}
.fundal .nav-btn {
background-color: #104f47;
border-radius: 50%;
box-shadow: 1px 2px 4px 0px #00000075;
}
.fundal .nav-btn i {
background: #fff;
border-radius: 2px;
}
#nav:checked+.nav-btn {
transform: rotate(45deg);
background-color: #104f47;
}
#nav:checked+.nav-btn i {
background: #fff;
transition: transform 0.2s ease;
}
#nav:checked+.nav-btn i:nth-child(1) {
transform: translateY(6px) rotate(180deg);
}
#nav:checked+.nav-btn i:nth-child(2) {
opacity: 0;
}
#nav:checked+.nav-btn i:nth-child(3) {
transform: translateY(-6px) rotate(90deg);
}
#nav:checked~.nav-wrapper {
z-index: 9990;
opacity: 1;
}
#nav:checked~.nav-wrapper ul li a {
opacity: 1;
transform: translateX(0);
}
.hidden {
display: none;
}
/* MEDIA SCREEN PTR TLF */
#media only screen and (max-width: 991px) {
.navigatie {
background-color: transparent;
width: 100%;
position: absolute;
;
z-index: 99;
margin: 0px;
padding: 0px;
}
.navbar-brand img {
height: 100px;
margin: -20px 0px 0px 0px;
}
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
opacity: 0;
transition: all 0.2s ease;
}
.nav-wrapper ul {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
}
.nav-wrapper ul li {
display: block;
float: none;
width: 100%;
text-align: right;
padding-top: 10px;
margin-bottom: 10px;
}
.nav-wrapper ul li:nth-child(1) a {
transition-delay: 0.2s;
}
.nav-wrapper ul li:nth-child(2) a {
transition-delay: 0.3s;
}
.nav-wrapper ul li:nth-child(3) a {
transition-delay: 0.4s;
}
.nav-wrapper ul li:nth-child(4) a {
transition-delay: 0.5s;
}
.nav-wrapper ul li:not(:first-child) {
margin-left: 0;
}
.nav-wrapper ul li a {
padding: 10px 24px;
opacity: 0;
color: #000;
font-size: 14px;
font-weight: 600;
letter-spacing: 1.2px;
transform: translateX(-20px);
transition: all 0.2s ease;
}
.nav-btn {
position: fixed;
right: 30px;
top: 28px;
display: block;
width: 48px;
height: 46px;
cursor: pointer;
z-index: 9999;
border-radius: 50%;
}
.nav-btn i {
display: block;
width: 20px;
height: 2px;
background: #fff;
border-radius: 2px;
margin-left: 14px;
}
.nav-btn i:nth-child(1) {
margin-top: 16px;
}
.nav-btn i:nth-child(2) {
margin-top: 4px;
opacity: 1;
}
.nav-btn i:nth-child(3) {
margin-top: 4px;
}
}
/* SCRIS DE LA BANNER */
.title {
position: absolute;
top: 47%;
left: 35%;
text-align: left;
transform: translate(-50%, -50%);
}
.title h1 {
color: #fff;
font-family: poppins;
font-size: 50px;
color: #f5f6f8;
padding-bottom: 20px;
}
.button button {
display: inline-block;
font-size: 12px;
text-transform: uppercase;
text-align: center;
padding: 13px 20px;
border: none;
color: white;
font-family: montserrat;
text-decoration: none;
transition: 0.6s ease;
background-color: #104f47;
box-shadow: 1px 2px 4px 0px #00000075;
outline: none;
}
.button button:hover {
background-color: #104f47;
color: white;
}
<div class="navigatie">
<nav>
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<a class="navbar-brand" href="index.php"><img src="./img/logoinainte.png"></a>
</div>
<div class="nav-wrapper">
<ul>
<li>Acasa</li>
<li>Despre</li>
<li>Servicii</li>
<li>Tarife</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<section class="banner">
<div class="container">
<div class="title">
<h1>Aspect curat <br>și îmbunătățit al <br>locuinței tale</h1>
<div class="button">
<button type="button">Sună acum!</button>
</div>
</div>
</div>
</section>
Could you tell me what is the problem?

You are using opacity. With opacity the element becomes invisible but it is still there. You have to set its display to none. And when the button is clicked you have to set its display to block.
.nav-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: #fff;
display:none;
transition: all 0.2s ease;
}
#nav:checked ~ .nav-wrapper {
z-index: 9990;
display:block
}

Viewport height not working and list does not appear

My problem is that when I specify the height of the div class "mobile" to 100wh, it only takes on about half of the screen. Another thing is, that I cannot make the list inside the mobile div to appear. My goal is to align them horizontally and vertically using flexbox, and make them appear as I press the hamburger button but so far I cannot see the list elements at all. Thanks for help!
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile {
position: fixed;
visibility: hidden;
background: rgba(255, 0, 0, 0);
width: 100vw;
height: 500px;
z-index: 1;
transition: visibility 1s, background 1s;
}
.hamburger {
align-items: center;
display: flex;
width: 25px;
height: 15px;
margin-right: 50px;
cursor: pointer;
display: none;
z-index: 2;
}
.hamburger.active .line {
background: rgba(0, 0, 0, 0);
transition: .2s;
}
.hamburger.active .line::before {
transform: rotate(45deg);
top: 0;
transition: .5s;
}
.hamburger.active .line::after {
transform: rotate(135deg);
top: 0;
transition: .5s;
}
.line {
position: relative;
background-color: black;
width: 100%;
height: 1px;
transition: .5s;
}
.line::before,
.line::after {
position: absolute;
content: "";
height: 1px;
width: 100%;
background-color: black;
}
.line::after {
top: 6px;
transition: .5s;
}
.line::before {
top: -6px;
transition: .5s;
}
.nav {
justify-content: flex-end;
display: flex;
flex-wrap: wrap;
letter-spacing: 1px;
padding: 30px 0;
margin-right: 50px;
}
.nav li {
text-align: center;
font-family: "Georgia";
padding-left: 60px;
font-size: .8em;
font-weight: normal;
letter-spacing: 1px;
list-style: none;
}
.nav li a {
position: relative;
text-decoration: none;
color: inherit;
transition: color .5s;
}
.nav li a::before {
top: 2em;
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: black;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.nav li a:hover::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.nav, nav {
align-items: center;
display: flex;
}
nav .logo {
margin-left: 50px;
display: flex;
justify-content: flex-start;
flex: 1;
font-family: Georgia, serif;
font-size: .8em;
padding: 30px 0;
font-weight: bold;
letter-spacing: 3px;
}
.sublogo {
font-weight: lighter;
margin-left: 10px;
}
.sublogo::before {
content: '|';
margin-right: 10px;
}
#media (max-width: 1120px) {
.nav {
display: none;
}
.hamburger {
display: flex;
-ms-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
nav .logo {
font-size: 1em;
letter-spacing: 3px;
transition: visibility .5s, opacity .5s;
}
nav .logo .sublogo {
letter-spacing: 3px;
}
.logo.active {
visibility: hidden;
opacity: 0;
transition: visibility .5s, opacity .5s;
}
.mobile.active {
display: flex;
visibility: visible;
background: rgba(255, 25, 55, 1);
transition: background 1s;
}
}
#media (max-width: 600px) {
nav .logo {
font-size: 1em;
letter-spacing: 3px;
}
.sublogo {
display: none;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<link rel="stylesheet" href="stylesheet.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.hamburger').click(function(){
$('.hamburger').toggleClass('active');
$('.logo').toggleClass('active');
$('.mobile').toggleClass('active');
})
})
</script>
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<div class="logo">
navigation.
<div class="sublogo">
this is my first example
</div>
</div>
<ul class="nav">
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
<div class="hamburger">
<div class="line">
</div>
</div>
<div class="mobile">
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>python</li>
<li>c++</li>
<li>php</li>
</ul>
</div>
</nav>
</body>
</html>

you made the width:100vw, you seem to left the height:500px;
Anyhow, check on the .mobile div that the position is fixed, but you did not specified any constraints like top:0; left:0; etc; this is why that div is too hight on the page.
The viewport is alright. :D Have a nice day!

css transition how to make mouseout effect

I am trying to figure out a way to make the black blob go back smoothly as you're dragging the cursor off it. Better yet I was wondering if its possible to make the blob disappear from left to right using css. Also, do you have an idea on how to make the text turn white as the blob goes over them? Thank you so much for help!
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
width: 0%;
height: 1.3em;
background-color: black;
visibility: hidden;
transition: width .2s;
}
li a:hover::before {
width: 100%;
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>

No need to use visibility since you already set 0% to width. You can also adjust the position to have a left to right transtion. For the color, simply add another hover declarion on the a:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
width: 0%;
left: auto;
right: 0;
height: 1.3em;
background-color: black;
transition: width .2s, left .2s .2s, right .2s .2s;
}
li a:hover::before {
width: 100%;
left: 0;
right: auto;
}
li a:hover {
color: #fff;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
You can also simplify your code using gradient:
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
background: linear-gradient(#000, #000) left/0% 100% no-repeat;
transition:
color 0.2s,
background-size 0.2s,
background-position 0.2s 0.2s;
}
li a:hover {
color: #fff;
background-size: 100% 100%;
background-position: right;
}
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>

i have updated your css code. hope this helps you:
* {
margin: 0;
padding: 0;
}
ul {
display: flex;
justify-content: flex-end;
letter-spacing: 1px;
align-items: center;
padding: 30px 0;
/*background-color: red;*/
}
li {
text-align: center;
font-family: "Trebuchet MS", Helvetica, sans-serif;
list-style: none;
padding: 0 30px;
text-transform: uppercase;
font-size: .71em;
}
ul li i {
margin-left: 7px;
}
li a {
position: relative;
text-decoration: none;
color: inherit;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
li a::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
li a:hover:before,
li a:focus:before,
li a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
li a:hover::before {
width: 100%;
visibility: visible;
}
li a:hover {
color: #fff;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="stylesheet.css">
<meta charset="utf-8">
<title>CSS & HTML NAVIGATION</title>
</head>
<body>
<nav>
<ul>
<li>home</li>
<li>text</li>
<li>image</li>
<li>slider<i class="fa fa-angle-down" title="slider"></i></li>
<li>html<i class="fa fa-angle-down"></i></li>
<li>css</li>
</ul>
</nav>
</body>
</html>